在 $http 加载的内容上呈现 AngularJS 指令 [英] Render AngularJS directive on $http loaded content

问题描述

我有点问题.我有一个指令

I have a bit of a problem. I have a directive

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            elem.on('click', function(e){
                e.preventDefault();
                alert('Hyperlinks not allowed!');
            });
        }
    };
});

和包含页面内容的 $http 请求 JSON

and a $http request for JSON containing the page content

{
    "currentNodeName":"Page 1",
    "childrenNodes":[
        {"id":"3","name":"Page 1-1"},
        {"id":"4","name":"Page 1-2"}],
    "parentNode":null,
    "currentNodeContent":[
        {"content":"<p>This is Page1. <a href=\"http://badlink.org/i/dont/want/to/work\">Link</a></p>"}],
    "currentNodeId":"1"
}

currentNodeContent 被加载到 div

<div id="loadedContent" ng-bind-html="boardCtrl.nodeData.currentNodeContent[0].content"></div>

现在的问题是:如何实现加载内容的 标签作为指令工作?

and now the question: How can I achieve that the loaded content's <a> tag works as a directive?

谢谢.

推荐答案

一个几乎正确的答案可以在 angular ng-bind-html 和其中的指令 虽然更好的形式是:

an almost correct asnwer can be found at angular ng-bind-html and directive within it although a better form would be:

app.directive("unsecureBind", function($compile) {
    return {
        link: function(scope, element, attrs) {
             scope.$watch(attrs.unsecureBind, function(newval) {
                  element.html(newval);
                  $compile(element.contents())(scope);
             });
        }   
    };  
});

ng-bind-html 只是将数据分配给 html，而不对其运行 $compile(参见 https://github.com/angular/angular.js/blob/master/src/ng/directive/ngBind.js#L197 ).这仍然不完全正确，因为在更改所包含的指令时不会通知它们正在销毁的值，因此更好的版本将是.

The ng-bind-html simply assigns the data to the html without running $compile on it (see https://github.com/angular/angular.js/blob/master/src/ng/directive/ngBind.js#L197 ). This still isn't completely right becouse on change of the value the contained directives are not notified that they are being destroyed a better version would therefore be.

app.directive("unsecureBind", function($compile) {
    return {
        link: function(scope, element, attrs) {
            var childscope;
            scope.$watch(attrs.unsecureBind, function(newval, oldval) {
                if (!newval && !oldval) return; // handle first run
                if (childscope)
                    childscope.$destroy();
                element.html(newval || "");
                if (!newval) return;
                childscope = scope.$new();
                $compile(element.contents())(childscope);
            });
        }
    };
});

从角度来看这是正确的，但是:

This is correct from the angular point of view, BUT:

• 你完全违反了 mvc 的想法
• 通过使用指令限制元素，您基本上是将元素列入黑名单，这通常不是您应该使用白名单的好主意.
• 允许用户输入成为 Angular 运行上下文的一部分也是非常不安全的.

最好通过白名单函数过滤输入的 html，然后将其与 ng-bind-html 绑定.

it would be a better idea to filter the input html through a whitelist function and then bind that with ng-bind-html.

这篇关于在 $http 加载的内容上呈现 AngularJS 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！