Question

我有一个JSON文件，其中包含我要加载的页面内容。在其中，我有一个看起来像这样的链接：

<a data-ng-click='foo()'>Bar</a>

当我将页面内容作为HTML加载到页面中时：

<p class="body" ng-bind-html="jsonText | raw"></p>

使用此过滤器：

app.filter('raw', function ($sce) {
    return function (input) {
        return $sce.trustAsHtml(input);
    }
});

该链接不会在点击时触发foo()来电。是我试图做不可能或我做错了什么？

Answer 1

问题是您在DOM中添加纯文本。您的过滤器只会添加一段html文本，其中包含ng-click指令，就浏览器而言，它只是一个无法理解的属性。

在将模板注入dom

之前，需要使用$ compile服务编译模板

Answer 2

使用过滤器不是一个好主意，因为您需要$compile加载的HTML，并且您需要$scope。因此，您需要手动$compile并将结果放在$scope中，或者创建指令而不是过滤器：

.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，您完全绕过contextual escaping，因此您只能使用自己的安全内容进行操作。

ng-click无法在手动加载的HTML中运行

2 个答案: