Question

我正在尝试使用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);
    }
});

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

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

我做错了什么？感谢。

Answer 1

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

在事件处理程序的底部调用$scope.$apply()。这将导致digest cycle运行，Angular会注意到您对$scope所做的更改（因为Angular设置的$watches由于您使用了{{ ... }}而导致HTML）并更新视图。

Answer 2

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

如果销毁分配给视图的父作用域的父作用域，则即使在$apply()调用之后，其更改也不会以任何方式影响视图。请参阅the example - 您可以通过文本输入更改视图值，但是当您单击销毁父范围！时，模型不再更新。

我不认为这是一个错误。这是应用程序中代码过于繁琐的结果： - ）

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

Answer 3

使用超时

$ timeout（function（）{ 码.... }， 0）;

AngularJS指令：更改未在UI中反映的$范围

3 个答案: