$sce.trustAsHtml 中的渲染指令答案

【问题标题】：Rendering directives within $sce.trustAsHtml$sce.trustAsHtml 中的渲染指令
【发布时间】：2014-01-04 13:31:50
【问题描述】：

我在这里添加了一个 Plunker：http://plnkr.co/edit/4vqV8toHo0vNjtfICtzI?p=preview

我正在尝试向 DOM 添加一个按钮，单击时应该执行绑定到它的函数。在这种情况下，它应该提醒“测试”。这是代码。

控制器

app.controller('MainCtrl', function($scope, $sce) {
        $scope.trustedHtml = $sce.trustAsHtml('<button ng-click="testAlert()">Submit</button>');  

        $scope.testAlert = function () {
            alert('testing')
        };
});

HTML

<body ng-controller="MainCtrl">
    <div ng-bind-html="trustedHtml"></div>
</body>

【问题讨论】：

签出：stackoverflow.com/questions/20358140/…

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

$sce.trustAsHtml 和 ng-bind-html 并不是要使用指令构建 HTML。这种技术行不通。

这是因为 Angular 的工作原理是先编译然后链接。请参阅conceptual overview 以获得很好的解释。

简而言之，当您链接trustAsHtml 中定义的 HTML 时，Angular 编译（并因此理解）ng-click 指令为时已晚。

为了动态添加 HTML，您应该查看$compile 服务（和/或指令）。 Docs are here.

【讨论】：

对，这是一个新的 plunker，展示了如何使用 $compile 实现这一点。 plnkr.co/edit/3CewDscih8diAo4mMSwJ?p=preview 以下是帮助我解决此问题的其他一些资源：stackoverflow.com/questions/18157305/…
在表格中构建一行并注入包含关键字动态指令的html时，这可能吗？
我希望你能具体说明如何解决这个问题。

【解决方案2】：

对于 Angular 1.6.1，我找到了适合我的解决方案。

模板：

<div ng-bind-html="trustAsHtml(content);" init-bind> </div>

在控制器中：

    $scope.trustAsHtml = function(string) {
        return $sce.trustAsHtml(string);
    };

指令：

.directive('initBind', function($compile) {
return {
        restrict: 'A',
        link : function (scope, element, attr) {
            attr.$observe('ngBindHtml',function(){
                if(attr.ngBindHtml){
                     $compile(element[0].children)(scope);
                }
            })
        }
    };
})

【讨论】：

如果有人愿意尝试，这也是一个解决方案。
太棒了！大量使用指令和 $compile。谢谢！