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

Plunker

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

1 个答案: