NicholasByDesign NicholasByDesign - 6 months ago 70
Node.js Question

Angular child ng-click event does not fire after parent ng-click event

I am pretty new to Angular so I have not figured out all its little quirks yet. Currently I have button that opens an overlay with ng-click="open()". Inside the overlay there is another button that closes the overlay with ng-click="close()".

As it stands now the ng-click events will not fire if the other is present with in the view. If ng-click="open()" is present, ng-click="close()" will not fire and vice versa.

Here is a simpler version of what I am talking about, as what I am working on is a little hefty on the actual app:

View

<button ng-click="open()">Open</button>

<div id="overlay">
<button ng-click="close()">Close</button>
</div>


Controller

$scope.open = function(){
//some move.js to open the overlay
}

$scope.close = function(){
//some move.js to close the overlay
}


The overlay is not generated dynamically and is rendered to the page onload.

Here is the solution as provided by @sz tech below. Not the $compile method. http://codepen.io/NicholasByDesign/pen/WwqMXa?editors=1010

Just kind of side note, as I do not think it will make a difference. I am working within a nodejs and jade environment. I put it as regular HTML and left out the controller code wrapping the open/close functions to simplify things.

Answer

The problem is that you are updating (div.innerHTML += "close";) the div which contains the angular code (ng-click="close()") and the binding will disappear, try to recompile the div after the update and it will work. Try out this code:

 var app = angular.module('myApp', []);
   app.controller('appCtrl', function($scope,$compile) {
   var div = document.getElementById('div');

   $scope.open = function(){
     div.innerHTML += "open";
         $compile(div)($scope);
   }

   $scope.close = function(){
     div.innerHTML += "close";
         $compile(div)($scope);
   }
});

As you can see I'm recompiling the div and bind the current scope to it, and it will work. Here's the working example: http://codepen.io/anon/pen/PNrRKL?editors=1010

Comments