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屋！