Question

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

实际上我正在使用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中使用这些模板，因为特殊的东西......）

由于

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

<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

为了进行HTML渲染，您必须使用以下函数：

lower_case_table_names

您必须在控制器中注入$ sce。

如果您在ng-repeat中执行此操作，则需要在控制器中执行此操作。例如：

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

在你的模板中......

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

无论如何，我不认为＆＃34; Angular＆＃34; HTML中的魔法将起作用。

Answer 2

使用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中使用一次性绑定以避免内存泄漏。

DEMO on JSFiddle

在ng-repeat

2 个答案: