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

查看：26
本文介绍了未触发 ajax 加载元素上的 Angularjs ng-click 事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

myApp.controller("MainController", function($scope, $http, $sce){$scope.showModal = false;$scope.openModal = 函数(名称){$scope.showModal = true;$http({方法:'获取'，url : '/template/fetch?name=' + 名称}).成功(功能(modalHtml){$scope.modalHtml = $sce.trustAsHtml(modalHtml);$scope.closeModal = function(){console.log("测试 2");};});};$scope.closeModal = function(){console.log("测试 1");};});

这是通过ajax加载的html:

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

谢谢！

解决方案

我认为最简单的方法是使用 ngInclude 指令并使用你的模板 url 作为 src 的值这个指令:

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

和控制器的代码:

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

Plunker

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

});

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>

Thanks!

解决方案

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>

And controller's code:

  $scope.modalContentUrl = '';

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

Plunker

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆