NG-单击不工作手动加载HTML [英] ng-click not working in manually loaded HTML
问题描述
我有一个包含页面内容我想加载一个JSON文件。在这里面,我有一个链接,看起来像这样:
I have a JSON file that contains the page content I wish to load. In it, I have a link that looks like this:
<a data-ng-click='foo()'>Bar</a>
当我加载网页内容到页面的HTML:
When I load the page content into the page as HTML:
<p class="body" ng-bind-html="jsonText | raw"></p>
使用此过滤器:
app.filter('raw', function ($sce) {
return function (input) {
return $sce.trustAsHtml(input);
}
});
该链接不触发点击富()
电话。就是我试图做不可能的还是我做错了什么?
the link does not trigger foo()
call on click. Is what I'm trying to do impossible or am I doing something wrong?
推荐答案
使用过滤器,这不是一个好主意,因为你需要 $编译
加载的HTML和对于需要 $范围
。所以,你要么需要 $编译
手动,并把在 $范围
自己,结果还是创建一个指示,而不是一个过滤器的
Using filter for this is not a good idea, because you need to $compile
the loaded HTML and for that you need $scope
. So, you either need to $compile
it manually and put the result in $scope
yourself, or create a directive instead of a filter:
.directive('dynamicHtml', ['$compile', function ($compile) {
return {
link: function ($scope, $element, $attrs) {
$scope.$watch($attrs.dynamicHtml, function (html) {
$element.empty().append($compile(html)($scope));
});
}
};
}]);
和使用它,而不是 ngBindHtml
:
<p dynamic-html="jsonText"></p>
要知道,自己编译的HTML,你完全绕过的上下文逃逸,所以你应该只用自己的,安全的内容做。
Just be aware that by compiling the HTML yourself, you're completely bypassing contextual escaping, so you should only do it with your own, secure content.
这篇关于NG-单击不工作手动加载HTML的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!