小编chr*_*ang的帖子

我有兴趣通过组合Angular.js指令中包含的可重用图形元素来构建复合SVG.例如,我可能有:

<div ng-app="svgApp">
  <canvas>
    <drawing ng-repeat="i in [1,2,3]" cy="{{i * 40}}"></drawing>
  </canvas>
</div>

我在哪里定义以下指令:

  .directive('canvas', function () {
    return {
      template: '<svg height=200 width=100 ng-transclude></svg>',
      restrict: 'E',
      replace: true,
      transclude: true
    };
  })

  .directive('drawing', function () {
    return {
      template: '<circle cx=50 r=15></circle>',
      restrict: 'E',
      replace: true
    };
  })

问题是SVG元素似乎没有被正确地转换.一个线索似乎就在这里,在另一个StackOverflow问题中,这主要是因为在Angular.js中没有正确创建SVG节点.

在进一步探讨之后,我找到了这个解决方案,它涉及使用辅助函数用正确创建的SVG节点替换相关的DOM元素,a:

  .value('createSVGNode', function(name, element, settings) {
      var namespace = 'http://www.w3.org/2000/svg';
      var node = document.createElementNS(namespace, name);
      for (var attribute in settings) {
        var value = settings[attribute];
        if …

这个插件的目的是将元素从控制器转换为Angular UI Modal,其中Modal由指令包装.解决方案应遵循以下前提:

• 该指令声明了字段的转换.这些字段包含在控制器HTML标记中的指令声明中.
• 在控制器中声明的这些字段应显示在模态中.
• 这些字段的范围应该可以在控制器中访问(请参阅我input1在控制器中声明了一个应该在Modal中设置值的变量).
• 我定义了一个content元素来转换字段.此元素位于模态的模板中.我不确定这个模板何时可以转录它.

总而言之,目标是在控制器HTML标记中声明一组字段并在模态中可用,其中模式包含在指令中,范围在控制器中管理.任何想法将不胜感激.

HTML

<div the-modal control="modalCtl">
    <p>some text</p>
    <input type="text" ng-model="input1" />
</div>

<button type="button" ng-click="open()">Open me!</button>

使用Javascript

var app = angular.module("app", ['ui.bootstrap']);

app.controller("ctl", function($scope,$timeout) {

  $scope.modalCtl = {};

  $scope.input1 = "abc";

  $scope.open = function(){
    $scope.modalCtl.openModal();
  };

});


app.directive("theModal", function($uibModal) {
  return {
    restrict: "AE",        
    scope: {              
      control: "="
    },
    transclude: true,
    link: function (scope, element, attrs, ctrl, transclude) {
      scope.control = scope.control || {}

      scope.control.openModal = function () …