Reference Angular binding from javascript

Question

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>

Thanks!

David L · Accepted Answer · 2015-06-10 19:15:48Z

1

You should place your logic inside of your controller and conditionally render as much html as necessary rather than invoking a script tag inside of an 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>

In your angular controller, you would then add a function to build out and return the svg for you to render.

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

answered Jun 10, 2015 at 19:15

David L

34.1k8 gold badges70 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tschmitty Over a year ago

Thank you for this proposal. I've been tinkering with it, but struck some problems with $sce in Angular. I tried expressing the problem as a new question to include more details: stackoverflow.com/questions/30854229/…

Jeremy · Accepted Answer · 2015-06-10 19:23:43Z

1

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.

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

I see two solutions here:

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>

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

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>

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

edited Jun 10, 2015 at 19:23

answered Jun 10, 2015 at 19:14

Jeremy

3511 silver badge3 bronze badges

1 Comment

tschmitty Over a year ago

Thank you @Jeremy I'll probably need to create directives for this eventually. Currently pursuing Davids proposal.

Collectives™ on Stack Overflow

Reference Angular binding from javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related