ng-click 在手动加载的 HTML 中不起作用答案

【问题标题】：ng-click not working in manually loaded HTMLng-click 在手动加载的 HTML 中不起作用
【发布时间】：2014-12-11 16:57:21
【问题描述】：

我有一个 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() 调用。我正在尝试做的事情是不可能的，还是我做错了什么？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

为此使用过滤器不是一个好主意，因为您需要 $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，因此您应该只使用自己的安全内容。

【讨论】：

这是一个有趣的方法，你将如何在 html 中使用它？作为 div 的属性？
想通了，您实际上只是将一个呼叫替换为另一个。很棒的解决方案，谢谢！

【解决方案2】：

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

在将模板注入 dom 之前，您需要使用 $compile 服务编译模板

【讨论】：