javascript - 在 ng-repeat 中编译 ng-bind-html

Question

我有一个特殊的模板问题...我有一系列产品，每个产品都有一个属性“button_code”，该属性是 HTML laravel 模板的纯文本结果，里面有一些 Angular 代码。

实际上，我在 a 中使用 ng-bind-html="product.button_code"并在 ng-repeat 中使用此模板，html 代码在每次重复迭代中都正确插入，但代码是纯文本，而且我需要“唤醒”该 html 内的 ng-controllers ng-clicks 等

我尝试这样做:

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

但这会使容器内的代码(插入 ng-bind-html 中的所有 html 代码)从 DOM 中消失。

我怎样才能做到这一点？PD:是的，我被迫在这些product.button_code中使用这些模板，因为有特殊的事情......)

谢谢

编辑:这是我想要绑定(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>

Answer 1

使用提供的嵌入函数作为 $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 绑定(bind)到元素。任何现有内容都将被删除。

用法:

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

请注意，该指令在 $watch 中使用一次性绑定(bind)以避免内存泄漏。

DEMO on JSFiddle