AngularJS动态加载的元素，里面的ng-click无法触发？

Question

在项目中，服务端返回了一个html字符串，写了一个filter,通过$sce.trustAsHtml(text)将字符串编译成可加载的html,但是元素里的ng-click事件无法触发，求解！！

   //字符串转html标签过滤器
    app.filter("htmlContent",["$sce",function($sce){        return function(text){            return $sce.trustAsHtml(text);
        }
    }]);     //模拟数据
    var jsonArr = [{        temp:"<h1 ng-click='showCoverBox()'>测试</h1>" 
    }];    //点击事件
    $scope.showCoverBox = function(){        console.log("测试");
    };    
   //页面通过ng-repeat展示
    <li ng-repeat="item in jsonArr">
        div ng-bind-html="item.tmp|htmlContent"></div>
    </li>

有人说可以在directive中通过$compile服务，编译DOM，实现动态的事件绑定，但是我想要的是不用指令，有没有其他解决方案，求大神指教~

Answer 1

这种情况必须用$compile, 你可以写一个directive, 已属性的形式加到div上angular.module('app',&nbsp;[]).directive('compileHtml',&nbsp;function&nbsp;($compile)&nbsp;{&nbsp;&nbsp;return&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;restrict:&nbsp;'A',&nbsp;&nbsp;&nbsp;&nbsp;replace:&nbsp;true,&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;link:&nbsp;function&nbsp;(scope,&nbsp;ele,&nbsp;attrs)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scope.$watch(function&nbsp;()&nbsp;{return&nbsp;scope.$eval(attrs.ngBindHtml);},&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(html)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ele.html(html); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$compile(ele.contents())(scope); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}; });<div&nbsp;ng-bind-html="item.tmp|htmlContent"&nbsp;compile-html></div>