Question

我正在寻找（最佳实践）方法来迭代角度控制器范围内的元素列表，并生成具有元素特定id的div，并将svg附加到元素特定div。我对Angular很新...并怀疑以下尝试失败，因为我误解了Angular绑定？

有什么更好的方法来执行以下操作：

<div id="top_level">
<div ng-repeat="item in items">
  <div id={{item.id}}>
    <script type="text/javascript">
      var svg_img = build_svg(args);
      document.getElementById({{item.id}}).appendChild(svg_img);
    </script>
  </div>
</div>
</div>

谢谢！

Answer 1

你的函数build_svg返回什么？

我们需要更多关于您希望得到的最终结果的信息。

但是，在ng-repeat指令中有一个脚本元素并不是一个好习惯。

我在这里看到两个解决方案：

1-直接在ng-repeat

中构建您的SVG

    <div id="top_level">
    <div ng-repeat="item in items">
      <div id={{item.id}}>
        <svg height="{{item.svg.attrs.height}}" width="{{item.svg.attrs.width}}">
           <circle cx="50" cy="50" r="40" stroke="black" stroke- width="3" fill="red" />      
          </svg>
      </div>
    </div>
    </div>

以下是此方法的摘要： http://plnkr.co/edit/g58BUPScjKHjRLAfx6ks?p=preview

2-创建一个指令以生成具有一些附加参数和灵活性的SVG。

    <div id="top_level">
    <div ng-repeat="item in items">
      <div id={{item.id}}>
        <my-svg attrs="item.svg.attrs"></my-svg>
      </div>
    </div>
    </div>

my-svg指令将生成带有attrs参数的SVG元素。

Answer 2

你应该把你的逻辑放在你的控制器里面，并根据需要有条件地渲染html，而不是在ng-repeat中调用一个脚本标签。

<div ng-controller="YourCtrl">
  <div id="top_level">
    <div ng-repeat="item in items">
      <div id={{item.id}}></div>
      <div ng-bind-html="$scope.buildSvg(item)">
      </div>
    </div>
  </div>
</div>

在角度控制器中，您将添加一个函数来构建并返回svg以供渲染。

app.controller('YourCtrl', ['$scope', function ($scope) {
    $scope.buildSvg = function (item) {
        // add logic here.
    }
});

从javascript引用Angular绑定

2 个答案: