Angularjs ng-click event on ajax-loaded element not firing

Question

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 html loaded via ajax won't work like you would do via jquery. You'll want to either write a directive or do some kind of ngInclude that has the html for your modal. — lucuma
– lucuma, Commented Jun 28, 2014 at 23:48

IUnknown · Accepted Answer · 2014-06-29 07:40:49Z

3

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

answered Jun 29, 2014 at 7:40

IUnknown

22.5k4 gold badges41 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs ng-click event on ajax-loaded element not firing

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related