AngularJS 指令:更改未反映在 UI 中的 $scope

IT技术 javascript angularjs
2021-03-07 09:44:32

我正在尝试使用 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如果我这样做,视图将不会更新为新的

我做错了什么?谢谢。

3个回答

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

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

@MarkRajcok Abit 关闭但与范围相关 -top scope您的应用程序绘制的是什么?(有rootscope之父吗?)
2021-04-18 09:44:32
对于那些仍然想知道的人,您可以使用 Angular 的 $timeout() 函数来解决“$apply already in progress”问题stackoverflow.com/questions/18996042
2021-04-21 09:44:32
我得到 $digest 已经在进行中,我的视图只在更新我的范围后几秒钟响应。docs.angularjs.org/error/$rootScope/inprog?p0=$digest
2021-04-25 09:44:32
@Jorre,听起来您可能有太多绑定:请参阅stackoverflow.com/questions/15183095/...
2021-05-03 09:44:32
@ogc-nick,如果您已经处于摘要循环中,则不必调用$apply(). 如果您的视图没有更新,那么您将与 OP 示例有所不同。
2021-05-11 09:44:32

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

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

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

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

我在 IE9 中遇到了一个问题,我正在使用ng-if它破坏了范围。因此,当我从项目列表中选择一个项目并根据项目类型填充属性时,我要确保对于所选项目类型不存在的属性没有任何冗余范围。但是在 IE 9 中,范围的破坏意味着我看到了奇怪的行为,{{}}没有渲染视图引用,下拉列表只显示文本的第一个字母。我替换ng-ifng-show,一切都奏效了。这个答案让我有了这个发现,谢谢
2021-05-03 09:44:32
是的 ng-show 而不是 ng-if 也解决了我的问题
2021-05-08 09:44:32

使用超时

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