CODEWITHSUNDEEP
javascriptangularjsionic-framework
user818700
user818700

Reputation:

AngularJS view not updating when changing model

This is quite an infamous issue with Angular, and there's so many articles explaining this on the web, but please just hear me out. I've read those, and they didn't work. I have the following (I'm just simplifying here):

View:

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

Controller:

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

    });

Now that doesn't work. I've read that I should use the $scope.$apply method, but when I did that I got the $digest already in progress error. To that they say that you should actually use $timeout(function() { // do stuff }); And while that doesn't throw any errors, the view simply doesn't update to hide the div when that's what the user chose.. Any ideas?

Also, yes I am injecting $timeout into the controller correctly...

Upvotes: 3

Views: 1049

Answers (3)

Om Prakash
Om Prakash

Reputation: 86

What I believe is a scope issue. I am not sure whether the scope is same in your case. As a solution you can give it a try.

Try:

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

In Controller:

.run(function($rootScope) {
    $rootScope.beHidden = false;
})

.controller('yourCtrl', function($scope, $rootScope) {
  // for some Condition
  $rootScope.beHidden = true;
  $timeout(function(){
    $rootScope.apply()
  }, 100);
})

Upvotes: 0

Michel
Michel

Reputation: 28359

Replace:

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

with:

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

Also, no need to wrap the update of beHidden in a $timeout call.

Upvotes: 3

Anvesh Arrabochu
Anvesh Arrabochu

Reputation: 165

I had a similar problem(with exact same usecase) and it was caused due to the {{ }} brackets. One should not use these braces in view.

Upvotes: 2

Related Questions