首頁猿問 AngularJS動態(tài)加載的元素，...

AngularJS動態(tài)加載的元素，里面的ng-click無法觸發(fā)？

JavaScript

叮當貓咪 2018-09-07 10:09:08

在項目中，服務(wù)端返回了一個html字符串，寫了一個filter,通過$sce.trustAsHtml(text)將字符串編譯成可加載的html,但是元素里的ng-click事件無法觸發(fā)，求解?。?nbsp; //字符串轉(zhuǎn)html標簽過濾器 app.filter("htmlContent",["$sce",function($sce){ return function(text){ return $sce.trustAsHtml(text); } }]); //模擬數(shù)據(jù) 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服務(wù)，編譯DOM，實現(xiàn)動態(tài)的事件綁定，但是我想要的是不用指令，有沒有其他解決方案，求大神指教~

查看完整描述

1 回答

喵喔喔

TA貢獻1735條經(jīng)驗獲得超5個贊

這種情況必須用$compile, 你可以寫一個directive, 已屬性的形式加到div上

angular.module('app', []).directive('compileHtml', function ($compile) {  return {    restrict: 'A',    replace: true,    
            link: function (scope, ele, attrs) {
      scope.$watch(function () {return scope.$eval(attrs.ngBindHtml);},          function(html) {
            ele.html(html);
            $compile(ele.contents())(scope);
          });
    }
  };
});<div ng-bind-html="item.tmp|htmlContent" compile-html></div>

反對回復(fù) 2018-10-08