compile ng-bind-html inside ng-repeat

Question

I have a special template problem... I have a array of products, every products have a property "button_code", this property is a result in plain text of HTML laravel template with some angular code inside.

Actually im using a ng-bind-html="product.button_code" inside a and use this template inside a ng-repeat, the html code is correctly inserted in every repeat iteration, but the code is plain text, and I need to "wake up" the ng-controllers ng-clicks etc inside this html

I try with this:

 var targets = $('.buy-button-container').toArray(); for (var target in targets) { console.log($(targets[target])); $compile($(targets[target]))($scope); } $scope.$apply();

But this make the code inside the container (all html code inserted in the ng-bind-html) dissapear of the DOM.

How i can do this? PD: and yes, im forced to use these template in these product.button_code because special things...)

Thanks

EDIT: This is a piece of code i want to bind:

<button class="buy-link btn btn-default" data-toggle="modal" role="button" ng-controller="BuyController" ng-click="doProduct({'id':'8888','title':'testestest','price':13.99,'currency':'EUR''preorder_enabled':false,'crossedPrice':100,'stock':true,'short_desc':'bla bla bla.','lbonus':false,'bonus_txt':false})"> <span class="left"> <i class="fa fa-cart"></i> <span itemprop="price">€13.99</span> </span> <span class="right"> {{GETIT}}</span> </button>

Did you try the ng-include directive? If fetches and compiles external html. — georgeawg
– georgeawg, Commented Oct 27, 2016 at 16:48
Yes but the ng-include at least only work for me for angular templates or external html, but i need to use the product.button_code content, and i try to do ng-include="product.button_code" but dont works — Zenth
– Zenth, Commented Oct 27, 2016 at 16:52
Can you provide an example of the target and what you are trying to bind? — georgeawg
– georgeawg, Commented Oct 27, 2016 at 17:09

georgeawg · Accepted Answer · 2016-10-27 21:56:23Z

Use the transclude function furnished as the second argument of the function created by the $compile service:

app.directive("compileBindExpn", function($compile) { return function linkFn(scope, elem, attrs) { scope.$watch("::"+attrs.compileBindExpn, function (html) { var expnLinker = $compile(html); expnLinker(scope, function transclude(clone) { elem.empty(); elem.append(clone); }) }); }; });

The above directive evaluates the compile-bind-expn attribute as an AngularJS expression. It then uses the $compile service to bind the evaluated HTML to the element. Any existing content will be removed.

Usage:

<div class="buy-button-container" compile-bind-expn="buttonCode"> <p>This Node disappears when expression binds</p> </div>

Note that the directive uses a one-time binding in the $watch to avoid memory leaks.

The DEMO on JSFiddle

yBrodsky · Accepted Answer · 2016-10-27 19:40:01Z

In order to make HTML render you have to use the following function:

$sce.trustAsHtml('<b>Your html</b>');

You will have to inject $sce into your Controller.

If you are doing this in a ng-repeat you will need a function in your controller that does this. Ex:

$scope.transformHTML = function(html) { return $sce.trustAsHtml(html); }

in your template...

<div ng-repat="foo in bar"> <div ng-bind-html="transformHTML(foo.html)"></div> </div>

Anyway, I don't think that the "Angular" magic within your HTML will work.

Collectives™ on Stack Overflow

compile ng-bind-html inside ng-repeat

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related