Javascript 在$http加载的内容上呈现AngularJS指令

我有点问题。我有指示

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

以及对包含页面内容的

JSON

的

$http

请求

{
    "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"
}

现在的问题是： 如何实现加载内容的

标记作为指令工作？

---

谢谢。

在上可以找到几乎正确的asnwer，不过更好的形式是：

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绑定html只将数据分配给html，而不在其上运行$compile（请参阅）。 这仍然不是完全正确的，因为在值发生变化时，所包含的指令并没有被通知它们正在被销毁，因此应该使用更好的版本

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

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

• 你完全违背了mvc的理念
• 通过使用指令限制元素，您基本上将元素列入黑名单，这通常不是一个好主意，您应该使用白名单
• 允许用户输入成为角度跑步上下文的一部分也是非常不安全的

---

最好是通过白名单函数过滤输入html，然后用ng bind html绑定。

Angular使用“a”作为指令作为优先级“0”（）

尝试这样做：

• 将优先级设置为高于定义的优先级，例如1或Number.MAX\u值
• 将terminal设置为true，这样它就不会处理较低的优先级

我想这可能有用……：）

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