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

Question

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

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

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

查看

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

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

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

只是一种旁注，因为我不认为它会有所作为。我在 nodejs 和 jade 环境中工作。我将其作为常规 HTML 放置，并省略了包装打开/关闭功能的 Controller 代码以简化操作。

Answer 1

问题是您正在更新 (div.innerHTML += "close";) 包含 Angular 代码 (ng-click="close()") 并且绑定(bind)将消失，请尝试在更新后重新编译 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 并将当前作用域绑定(bind)到它，它会起作用。这是工作示例:http://codepen.io/anon/pen/PNrRKL?editors=1010