我遇到了一点问题。我有一个指令
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包含页面内容
{
"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>
现在的问题是:
如何实现加载内容的 <a>标签可以作为指令吗？
谢谢。
最佳答案
几乎正确的答案可以在 angular ng-bind-html and directive within it 找到虽然更好的形式是:
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 )。 这仍然不完全正确，因为在更改值时，所包含的指令不会被通知它们正在被销毁，因此会有更好的版本。
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);
});
}
};
});
从 Angular 来看这是正确的，但是:
- 你完全违背了mvc的思想
- 通过使用指令限制元素，您基本上将元素列入黑名单，这通常不是一个好主意，您应该使用白名单。
- 允许用户输入成为 Angular 运行上下文的一部分也是非常不安全的。
最好通过白名单函数过滤输入 html，然后使用 ng-bind-html 进行绑定(bind)。
关于javascript - 在 $http 加载的内容上渲染 AngularJS 指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25507525/