CODEWITHSUNDEEP
javascriptangularjsapply
0xAX
0xAX

Reputation: 21817

Apply in progress in Angular.JS

I have angularjs application and <span> in it. I try to hide it with ng-hide directive, but:

<span ng-hide="hideSpan">

And

// controller code here
....
$scope.hideSpan = true;
....

Doesn't work, it's ignoring. And if i make:

// controller code here
....
$scope.$apply(function(){$scope.hideSpan = true});
....

I get error: $apply already in progress.

How can i correctly use ng-hide/ng-show in this way?

Thank you.

Upvotes: 0

Views: 1204

Answers (2)

Ju Kom
Ju Kom

Reputation: 41

you can just change the hideSpan value in ng-click, save few lines. cheers

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myapp" ng-controller="mycontroller">
    <span ng-hide="hideSpan">Some Content to hide</span>
    <button ng-click="hideSpan=!hideSpan"/>Toggle Hide</button>
  </body>

Upvotes: 0

Paul Ryan
Paul Ryan

Reputation: 1509

You should be able to directly control the hide/show functions from your controller just as you show. The following is working example using a button to trigger toggling of hide show. 

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myapp" ng-controller="mycontroller">
    <span ng-hide="hideSpan">Some Content to hide</span>
    <button ng-click="toggleHide()"/>Toggle Hide</button>
  </body>

</html>

And the script.

angular.module('myapp', []).controller('mycontroller', function($scope){
  $scope.hideSpan = true;

  $scope.toggleHide = function(){
    if($scope.hideSpan === true){
      $scope.hideSpan = false;
    }
    else{
      $scope.hideSpan = true;
    }
  }

  });

I've created a simple plunker to show this in action at http://plnkr.co/edit/50SYs0Nys7TWmJS2hUBt?p=preview.

As far as why the $apply is causing an error, this is to be expected as direct scope (provided by the $scopeProvider) variable operations are already watching for change and wrapped into a default apply of sorts in core angular so any change will be automatically applied to the other bindings of that variable.

Upvotes: 1

Related Questions