10 Angular child ng-click-Ereignis wird nicht ausgelöst, nachdem die Eltern ng-click-Ereignis

Question

Ich bin ziemlich neu in Angular, so dass ich noch nicht alle seine kleinen Macken herausgefunden habe. Zur Zeit habe ich eine Schaltfläche, die ein Overlay mit ng-click = "open()" öffnet. Innerhalb des Overlays befindet sich eine weitere Schaltfläche, die das Overlay mit ng-click = "close()" schließt.

Wie es jetzt aussieht, werden die ng-click Ereignisse nicht ausgelöst, wenn der andere in der Ansicht vorhanden ist. Wenn ng-click = "open()" vorhanden ist, wird ng-click = "close()" nicht ausgelöst und umgekehrt.

Hier ist eine einfachere Version von dem, was ich rede, wie das, was ich arbeite ist ein wenig kräftig auf dem tatsächlichen App:

Ansicht

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

Das Overlay wird nicht dynamisch generiert und wird auf der Seite onload gerendert.

Hier ist die Lösung, wie sie von @sz technic zur Verfügung gestellt wird. Nicht die $ compile-Methode. http://codepen.io/NicholasByDesign/pen/WwqMXa?editors=1010

Nur eine Art Randnotiz, wie ich glaube nicht, dass es einen Unterschied machen wird. Ich arbeite in einer nodejs- und jade-Umgebung. Ich habe es als normales HTML eingegeben und den Controller-Code weggelassen, der die Funktionen zum Öffnen/Schließen umschließt, um die Dinge zu vereinfachen.

Answer 1

Das Problem ist, dass Sie aktualisieren (div.innerHTML += "close";) das div, das den eckigen Code enthält (ng-click="close()") und die Bindung wird verschwinden, versuchen Sie, das div nach dem Update neu zu kompilieren, und es wird funktionieren. Versuchen Sie diesen Code aus:

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

Wie man sehen kann ich die div neu zu kompilieren und binden den aktuellen Bereich, und es wird funktionieren. Hier ist das Arbeitsbeispiel: http://codepen.io/anon/pen/PNrRKL?editors=1010

Answer 2

versuchen es

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

    $scope.open = function(){ 
     div.append("open"); 
    } 

    $scope.close = function(){ 
     div.append("close"); 
    } 
});