当改变模型时，AngularJS视图不更新

AngularJS view not updating when changing model

本文关键字：视图 更新 AngularJS 改变 模型      更新时间：2023-09-26

这是Angular中一个非常臭名昭著的问题，网上有很多文章都在解释这个问题，但请听我把话说完。我读过这些，但都不起作用。我有以下内容(这里我只是简化一下):

视图:

<div ng-hide="{{beHidden}}"></div>

控制器:

// Set beHidden to initially be false (This works and reflects when set to true as well)
$scope.beHidden = false;
// First we display a popup asking the user to choose whether the div should be hidden
    var confirmPopup = $ionicPopup.confirm({
        title: 'Hidden Div',
        template: 'Do you want to hide the div?',
        cancelText: 'No',
        okText: 'Yes'
    }).then(function(res) {
      if(res) {          
        // User chose to hide div
        $timeout(function() {
          $scope.beHidden = true;
        });
      } else {          
        // User chose NOT to hide div
        $timeout(function() {
          $scope.beHidden = false;
        });
      }
    });

现在不起作用了。我读到我应该使用$scope.$apply方法，但是当我这样做的时候，我得到了$digest already in progress错误。他们说，你应该使用$timeout(function() { // do stuff });，而这不会抛出任何错误，视图根本不会更新，以隐藏div，当这是用户选择…什么好主意吗?

另外，是的，我正确地将$timeout注入控制器…

Replace:

<div ng-hide="{{beHidden}}"></div>

: 

<div ng-hide="beHidden"></div>

也不需要在$timeout调用中封装beHidden的更新

我有一个类似的问题(完全相同的用例)，这是由于{{ }}括号引起的。不要在视图中使用大括号

我认为这是一个范围问题。我不确定你的情况是否相同。作为一种解决办法，你可以试一试。

试题:

<div ng-hide="{{$root.beHidden}}"></div>
在控制器:

.run(function($rootScope) {
    $rootScope.beHidden = false;
})
.controller('yourCtrl', function($scope, $rootScope) {
  // for some Condition
  $rootScope.beHidden = true;
  $timeout(function(){
    $rootScope.apply()
  }, 100);
})
相关文章：