3

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...

Improve this question

3 Answers 3

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks Michael, but, how would i then implement functionality like this: ng-hide="{{!beHidden}}" ? (Notice the ! )
handle from controller @DeanGrobler
Not sure I get your question. If you set $scope.beHidden = false; in the controller, then at digest angular will update the view and the corresponding div will be visible, as the beHidden evaluates to false
You could also use the complementary directive ng-show: ng-show="!beHidden". Although there is no point to do that, ng-hide as been introduced to avoid negative expressions, and improve readability
2

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.

Improve this answer

3 Comments

Okay I'm a little confused now though. I'm new to Angular and all but, isn't {{}} how you link up models in your view? What I'm I missing here? Also, what happens when I want to do ng-hide="{{!beHidden}}" ?
yes, {{}} these braces are used to link up models in the view but only in between html tags, not in the attributes provided by angular.
for example, you can use <div>{{some_model}}</div> or <div ng-model="some_model"></div> but NOT <div ng-model="{{some_model}}"></div>
0

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);
})
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.