Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I would suggest making a <code>directive</code> that will get past in the scope of the repeater and the do an <code>element.replaceWith</code> and a <code>$compile</code> to get the HTML. if there is no further binding of angular, you could just use <code>$sce</code> to output trusted HTML. Prob depends on the type of security needed on the site, I'd go with the directive personally. ** I HAVE NOT TESTED BELOW and I dont know anything about canvas/svg stuff :-)</p> <p>html on page</p> <pre><code> &lt;svg-object varObject="o" data-ng-repeat="o in varObjects"&gt;&lt;/svg-object&gt; </code></pre> <p>json model on controller</p> <pre><code>$scope.varObjects = [{ "shape": "circle", "id": "cir123", "cx": "50", "cy": "50", "r": "50", "fill": "red" }, { "shape": "rect", "id": "rec23", "width": "50", "height": "50", "fill": "green" }] </code></pre> <p>Declare your module, name it and include the named module in your app </p> <pre><code>var module = angular.module('myApp.directives', []) module.directive('svgObject', function ($compile) { return { scope:{ varObject:'@' }, restrict: 'E', link: function (scope, elem, attrs, ctrl) { var rsltHtml = '&lt;' + scope.varObject.shape for (var property in scope.varObject) { switch (property) { //properties to ignore case "shape": case "alsoignore": continue; } if (scope.varObject.hasOwnProperty(property)) { rsltHtml += ' '+ property + '="' + scope.varObject[property]+ '" '; } } rsltHtml += "/&gt;"; elem.replaceWith($compile(rsltHtml)(scope)); } }; </code></pre> <p>});</p> <p>add directive to main app</p> <pre><code>var myApp = angular.module('myApp', ['myApp.directives', 'ngSanitize']) </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload