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值：

  <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;
  };

柱塞