父级ng-click事件后,angular度子级ng-click事件不会触发

我对Angular来说很新颖,所以我还没有想出所有的小怪癖。 目前我有一个button,用ng-click =“open()”打开覆盖。 在叠加层中还有另一个button,用ng-click =“close()”closures叠加层。

现在看来,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 } 

叠加层不是dynamic生成的,而是呈现给页面加载。

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

只是一个方面说明,因为我不认为这将有所作为。 我在一个nodejs和jade环境中工作。 我把它作为普通的HTML,省去了封装了打开/closuresfunction的控制器代码来简化事情。

       

网上收集的解决方案 "父级ng-click事件后,angular度子级ng-click事件不会触发"

问题是你正在更新( 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

尝试一下

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