Javascript 在ng repeat中编译ng bind html_Javascript_Angularjs

Javascript 在ng repeat中编译ng bind html

javascript angularjs

Javascript 在ng repeat中编译ng bind html,javascript,angularjs,Javascript,Angularjs,我有一个特殊的模板问题。。。我有一个产品数组，每个产品都有一个属性“button_code”，这个属性是HTML laravel模板的纯文本结果，里面有一些角度代码实际上，我在a中使用一个ng bind html=“product.button\u code”，并在ng repeat中使用此模板，html代码在每次重复迭代中都正确插入，但代码是纯文本的，我需要“唤醒”此html中的ng控制器ng单击等我试着这样做： var targets = $('.buy-button-c

我有一个特殊的模板问题。。。我有一个产品数组，每个产品都有一个属性“button_code”，这个属性是HTML laravel模板的纯文本结果，里面有一些角度代码

实际上，我在a中使用一个ng bind html=“product.button\u code”，并在ng repeat中使用此模板，html代码在每次重复迭代中都正确插入，但代码是纯文本的，我需要“唤醒”此html中的ng控制器ng单击等

我试着这样做：

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

但这使得容器中的代码（插入ng绑定html中的所有html代码）与DOM不相似

我怎么能做到？ PD：是的，我被迫在这些产品中使用这些模板。按钮\代码，因为特殊的东西…）

谢谢

编辑：这是我要绑定的一段代码：

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


€13.99
{{GETIT}}

要进行HTML渲染，必须使用以下功能：

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

在模板中

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

无论如何，我不认为HTML中的“角度”魔法会起作用。

为了使HTML呈现，您必须使用以下函数：

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

在模板中

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

无论如何，我不认为HTML中的“角度”魔力会起作用。

使用transclude函数作为

$compile

服务创建的函数的第二个参数：

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);
             })
        });
    };
});

上述指令将

compile bind expn

属性作为AngularJS表达式进行计算。然后，它使用

$compile

服务将经过计算的HTML绑定到元素。任何现有内容都将被删除

用法：

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


当表达式绑定时，此节点消失

请注意，该指令在

$watch

中使用一次性绑定以避免内存泄漏