参考角从JavaScript绑定 [英] Reference Angular binding from javascript

问题描述

我在寻找一个（最佳实践）的方式，通过在角度控制的范围元素列表进行迭代并生成一个元素特定ID的div并追加一个SVG的元素特定的股利。我很新的角度...和怀疑，因为我误解角绑定下面的尝试失败？

I'm looking for a (best-practice) way to iterate through a list of elements in the scope of an angular controller and generate a div with an element specific id and append a svg to the element specific div. I'm very new to Angular...and suspect that the following attempt fails because I misunderstand Angular bindings?

什么是更好的方式来做到以下几点：

What is a better way to do the following:

<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>

谢谢！

推荐答案

什么是您的函数返回build_svg？

What does your function build_svg return?

我们会需要了解什么归宿，你想获得更多一点的信息。

We'd need a little more information about the kind of end-result you would like to get.

但是，是的，这不是真正的好做法，对NG-重复指令中的脚本元素。

But yeah, it's not really good practice to have a script element within a ng-repeat directive.

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

I see two solutions here:

1- NG重复中直接创建您的SVG

1- Build your SVG directly within the ng-repeat

    <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>

下面是该方法的一个plunker：
http://plnkr.co/edit/g58BUPScjKHjRLAfx6ks?p=$p$pview

Here is a plunker of this method: http://plnkr.co/edit/g58BUPScjKHjRLAfx6ks?p=preview

2 - 创建一个指令，产生一些额外的参数和灵活性的SVG。

2- Create a directive to generate your SVG with some additional parameters and flexibility.

    <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>

我的SVG的指令会产生与ATTRS参数的SVG元素。

The my-svg directive would generate a SVG element with the attrs parameters.

这篇关于参考角从JavaScript绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！