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 和玉环境中工作。我把它作为普通的 HTML 并省略了包装打开/关闭函数的控制器代码以简化事情。

Answer 1

问题是您正在更新 (div.innerHTML += "close";) 包含角码 (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");
   }
});