AngularJS指令：更改$范围不反映在用户界面
我试图用AngularJS做一些自定义元素，并绑定一些事件，然后我注意到$ scope.var在绑定函数中使用时不会更新UI。
这是一个简单的例子，描述了probelm：
HTML：
<!doctype html> <html ng-app="test"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="Ctrl2"> <span>{{result}}</span> <br /> <button ng-click="a()">A</button> <button my-button>B</button> </div> </body> </html> JS：
function Ctrl2($scope) { $scope.result = 'Click Button to change this string'; $scope.a = function (e) { $scope.result = 'A'; } $scope.b = function (e) { $scope.result = 'B'; } } var mod = angular.module('test', []); mod.directive('myButton', function () { return function (scope, element, attrs) { //change scope.result from here works //But not in bind functions //scope.result = 'B'; element.bind('click', scope.b); } });
DEMO： http : //plnkr.co/edit/g3S56xez6Q90mjbFogkL?p=preview
基本上，我将click事件绑定到my-button并希望当用户点击buttonB（类似于buttonA上的ng-click:a()时更改$scope.result 。 但如果我这样做的话，这个视图不会更新到新的$scope.result 。
我做错了什么？ 谢谢。
事件处理程序被称为“外部”的Angular，所以尽pipe你的$scope属性将被更新，视图将不会更新，因为Angular不知道这些变化。
在事件处理程序的底部调用$scope.$apply() 。 这将导致摘要循环运行，而且Angular会注意到你对$scope所做的修改（因为Angular在HTML中使用{{ ... }}设置的$watches watch），并更新视图。
这也可能是由于不同的问题，但具有相同的症状。
如果销毁分配给视图的父范围，则即使在$apply()调用之后，其更改也不会以任何方式影响视图。 查看示例 – 您可以通过文本input更改视图值，但是当您单击销毁父范围时！ ，模型不再更新。
我不认为这是一个错误。 这是在应用程序太hacky代码的结果:-)
使用Angular Bootstrap的模式时，我遇到了这个问题。 我试图打开第一个范围的第二个模态。 然后，我立即closures了导致父范围被销毁的第一个模式。
使用超时
$ timeout（function（）{code ….}，0）;
