来自 javascript 的参考 Angular 绑定答案

【问题标题】：Reference Angular binding from javascript来自 javascript 的参考 Angular 绑定
【发布时间】：2015-06-11 03:23:43
【问题描述】：

我正在寻找一种（最佳实践）方法来遍历角度控制器范围内的元素列表并生成具有元素特定 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>

谢谢！

【问题讨论】：

标签： angularjs

【解决方案1】：

你应该将你的逻辑放在你的控制器中，并根据需要有条件地渲染尽可能多的 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.
    }
});

【讨论】：

感谢您的提议。我一直在修补它，但在 Angular 中遇到了 $sce 的一些问题。我尝试将问题表达为一个新问题以包含更多详细信息：stackoverflow.com/questions/30854229/…

【解决方案2】：

你的函数 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 元素。

【讨论】：

谢谢@Jeremy，我最终可能需要为此创建指令。目前正在追求戴维斯的提议。