Ajax加载元素上的Angularjs ng-click事件未触发

Question

我无法从通过ajax加载的某些内容中触发点击事件。没有看到从下面的代码或者执行console.log：

myApp.controller("MainController", function($scope, $http, $sce){ 
    $scope.showModal = false; 
    $scope.openModal = function(name){ 
     $scope.showModal = true; 
     $http({ 
      method : 'GET', 
      url : '/template/fetch?name=' + name 
     }).success(function(modalHtml){ 
      $scope.modalHtml = $sce.trustAsHtml(modalHtml); 

      $scope.closeModal = function(){ 
       console.log("test 2"); 
      }; 

     }); 
    }; 

    $scope.closeModal = function(){ 
     console.log("test 1"); 
    }; 

}); 

这里是通过AJAX加载HTML：

<div class="modal"> 
    <div class="modal-cover"> 
    </div> 
    <div class="modal-container"> 
     <div class="modal-close" ng-click="closeModal()"></div> 
     <div class="modal-content-container" ng-bind-html="modalContent"> 
     </div> 
    </div> 
</div> 

谢谢！

Answer 1

我认为最简单的方法是使用ngInclude指令，并使用模板网址为src值这个direcive的：

<div class="modal"> 
    <div class="modal-cover"> 
    </div> 
    <div class="modal-container"> 
     <div class="modal-close" ng-click="closeModal()"></div> 
     <div class="modal-content-container" ng-include src='modalContentUrl'> 
     </div> 
    </div> 
    </div> 

和控制器代码：

$scope.modalContentUrl = ''; 

    $scope.openModal = function(name) { 
    $scope.showModal = true; 
    $scope.modalContentUrl = '/template/fetch?name=' + name; 
    }; 

Plunker