58

我正在尝试使用 AngularJS 制作一些自定义元素并将一些事件绑定到它，然后我注意到 $scope.var 在绑定函数中使用时不会更新 UI。

这是一个描述问题的简化示例：

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

演示：http ://plnkr.co/edit/g3S56xez6Q90mjbFogkL?p=preview

基本上，我将click事件绑定到my-button并希望$scope.result在用户单击按钮 B 时进行更改（类似于ng-click:a()按钮 A）。$scope.result但是如果我这样做，视图不会更新到新的。

我做错什么了？谢谢。

4

3 回答 3

175

事件处理程序被称为“外部”Angular，因此尽管您的$scope属性会更新，但视图不会更新，因为 Angular 不知道这些更改。

$scope.$apply()在事件处理程序的底部调用。这将导致一个摘要循环运行，并且 Angular 会注意到您对 Angular 所做的更改$scope（因为在您的 HTML$watches中使用该 Angular 设置）并更新视图。{{ ... }}

于 2013-04-17T17:24:14.343 回答
4

这也可能是不同问题但具有相同症状的结果。

如果您销毁分配给视图的父范围，即使在$apply()调用之后，其更改也不会以任何方式影响视图。查看示例- 您可以通过文本输入更改视图值，但是当您单击 时Destroy parent scope!，模型不再更新。

我不认为这是一个错误。这是应用程序中的代码过于hacky的结果:-)

我在使用Angular Bootstrap 的 modal时遇到了这个问题。我试图打开第一个范围的第二个模态。然后，我立即关闭了导致父作用域被破坏的第一个模式。

于 2015-07-31T14:02:43.417 回答
2

使用超时

$timeout(function () { 代码.... }, 0);

于 2017-09-13T07:58:34.383 回答