ajax加载元素上的Angularjs ng-click事件未触发 [英] Angularjs ng-click event on ajax-loaded element not firing

问题描述

我无法使点击事件从通过ajax加载的某些内容中触发.从以下代码中看不到任何console.log:

I'm having trouble getting a click event to fire from some content that is loaded via ajax. Not seeing either console.log from the following code:

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:

And here is the html that is loaded via ajax:

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

谢谢！

推荐答案

我认为最简单的方法是采用 ngInclude 指令并将模板网址用作 src 的值这个方向性:

The simplest way I believe is to employ ngInclude directive and use your template url as src value of this 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;
  };

柱塞

这篇关于ajax加载元素上的Angularjs ng-click事件未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！