angularjs – angular ng-bind-html和其中的指令

发布时间：2020-12-17 09:07:11 所属栏目：安全来源：网络整理

导读：Plunker Link 我有一个元素，我想绑定到它的html。 div ng-bind-html =“details”upper / div 这样可行。现在，随着它我也有一个指令绑定到html： $ scope.details =’成功！ a href =“#/ details / 12”upper details / a 但指令上面的div和anchor不评估

Plunker Link

我有一个元素，我想绑定到它的html。

< div ng-bind-html =“details”upper>< / div>

这样可行。现在，随着它我也有一个指令绑定到html：

$ scope.details =’成功！ < a href =“#/ details / 12”upper> details< / a>

但指令上面的div和anchor不评估。如何使它工作？

我也面临这个问题，经过几个小时搜索互联网我阅读@ Chandermani的评论，这被证明是解决方案。
你需要用这个模式调用一个’compile’指令：

HTML：

<div compile="details"></div>

JS：

.directive('compile',['$compile',function ($compile) {
    return function(scope,element,attrs) {
        scope.$watch(
            function(scope) {
                // watch the 'compile' expression for changes
                return scope.$eval(attrs.compile);
            },function(value) {
                // when the 'compile' expression changes
                // assign it into the current DOM
                element.html(value);

                // compile the new DOM and link it to the current
                // scope.
                // NOTE: we only compile .childNodes so that
                // we don't get into infinite loop compiling ourselves
                $compile(element.contents())(scope);
            }
        );
    };
}])

你可以看到一个工作fiddle of it here

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!