AngularJS指令:改变$scope不反映在UI中

AngularJS Directives: Change $scope not reflected in UI

本文关键字：UI scope 指令 改变 AngularJS      更新时间：2023-09-26

我试图用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。

我做错了什么?谢谢。

事件处理程序是在Angular外部调用的，所以尽管你的$scope属性会被更新，但视图不会更新，因为Angular不知道这些变化。

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

这也可能是由于不同的问题，但具有相同的症状。

如果你销毁了父作用域，它的变化不会以任何方式影响视图，即使在$apply()调用之后。查看示例-您可以通过文本输入更改视图值，但是当您单击破坏父作用域时!，模型不再更新。

我不认为这是一个bug。这是由于应用程序中代码太粗糙所致:-)

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

use timeout

$timeout(function () {代码…}，0);

相关文章：