Question

我开发了AngularJS指令，将矩形添加到SVG文档中：

  <svg version="1.1" width="200" height="100">

<g>
  <!-- Works -->
  <g dir-rect1="" viz-settings="settings.rect1" />
  <!-- Doesn't work -->
  <g dir-rect2="" viz-settings="settings.rect2" />
</g>

唯一的区别是指令之间是dir-rect1指令不使用replace而dir-rect2指令使用：

app.directive('dirRect2', function($compile) {
  return {
    restrict: 'AE',
    scope: {
      vizSettings: '=',
    },
    replace:true, // <--- DOESN'T WORK
    template: '<rect fill="{{vizSettings.fill}}" stroke="{{vizSettings.fill}}" width="{{vizSettings.width}}" height="{{vizSettings.height}}" />',
    link: function($scope, elem, attr, ctrl) {
      console.debug($scope);
    }
  };
});

为什么当我在dirRect2指令中使用替换时，我看不到一个矩形？似乎生成的代码在两种情况下都是正确的。您可以在plunker上看到示例。

Answer 1

两件事：

不推荐使用replace，因此我不建议您使用
将属性替换为子项，这就是你的问题。

第二个指令生成：

<rect fill="#111111" stroke="#111111" width="10" height="20" dir-rect2="" viz-settings="settings.rect2" class="ng-isolate-scope"></rect>

似乎dir-rect2和viz-settings在某种程度上破坏了svg ...如果你用相同的代码删除这些属性...... svg似乎有效：

<rect fill="#111111" stroke="#111111" width="10" height="20" ></rect>

Answer 2

dirRect1 替换中的

是 false （默认值），而dirRect2中的是 true ，因此您会在两个指令之间看到不同的行为。

自＃34; rect＆＃34;＆＃34; replace: true＆＃34;标签是在svg中渲染形状所必需的！（因为我刚认识，因为我从未玩过svg）

（当您定义＆＃34; {{1}}＆＃34;您告诉Angular删除应用该指令的原始标记）

AngularJS指令替换

2 个答案: