AngularJS вид не обновляется при изменении модели

Question

Это довольно печально известная проблема с 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, когда это то, что выбрал пользователь. Любые идеи?

Кроме того, да я инъекционного $ таймаут в правильно контроллер ...

Answer 1

У меня была аналогичная проблема (с точно такой же USECASE), и это было вызвано из-за {{ }} скобки. Нельзя использовать эти фигурные скобки.

Answer 2

Заменить:

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

с:

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

Кроме того, нет необходимости, чтобы обернуть обновление beHidden в $timeout вызова.

Answer 3

Что я считаю проблемой сферы. Я не уверен, что область видимости одинакова в вашем случае. В качестве решения вы можете попробовать.

Try:

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