Angular 子 ng-click 事件不会在父 ng-click 事件之后触发

Question

我对 Angular 还很陌生，所以我还没有弄清楚它的所有小怪癖。目前我有一个用 ng-click="open()" 打开覆盖的按钮。在叠加层内还有另一个按钮，可以使用 ng-click="close()" 关闭叠加层。

就目前而言，如果另一个出现在视图中，则不会触发 ng-click 事件。如果 ng-click="open()" 存在， ng-click="close()" 将不会触发，反之亦然。

这是我正在谈论的一个更简单的版本，因为我正在做的事情在实际应用程序上有点繁重：

查看

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

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

控制器

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

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

叠加层不是动态生成的，而是呈现给页面加载。

下面是@sz tech 提供的解决方案。不是 $compile 方法。 http://codepen.io/NicholasByDesign/pen/WwqMXa?editors=1010

只是一种旁注，因为我认为这不会有什么不同。我在 nodejs 和 jade 环境中工作。我把它作为常规 HTML 并省略了包装 open/close 函数的控制器代码以简化事情。

Answer 1

问题是您正在更新 (div.innerHTML += "close";) 包含 angular 代码 (ng-click="close()") 的 div 并且绑定将消失，请尝试重新编译更新后的 div 即可。试试这个代码：

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

如您所见，我正在重新编译 div 并将当前作用域绑定到它，它会起作用。这是工作示例：http://codepen.io/anon/pen/PNrRKL?editors=1010

Answer 2

试一试

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

Angular 子 ng-click 事件不会在父 ng-click 事件之后触发

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

javascript

mean

node.js

angularjs

pug