Angular One-time bind conditionally OR unbind listener when a specific value is set

Question

I've something like below in DOM:

 <div ng-if="variant"
    ng-include="'size-picker.html'">
 </div>

And in controller:

$scope.variant = false;
// after some unknown time there may be:
$scope.variant = true;

I wanted to show that div when variant is true. So,

$scope.variant will start by false. After some time it may/may not become true. When $scope.variant became true it's never gonna change it's value. So what I want is one-time bind that ng-if once $scope.variant is true.

An approach like:

<div ng-if="::variant"
    ng-include="'size-picker.html'">
</div>

will stop binding when it's false.

I can achieve it by stop assigning false to variant in the first time, but it's not possible in my case.

How can I unbind the ng-if when variant is true?

Sravan · Accepted Answer · 2016-10-18 05:52:30Z

2

You can use $watch, to unregister a binding or a scope

$watch returns a deregistration function.

You can unregister a $watch with the function returned by the $watch call:

var unwatch = $scope.$watch('variant', function(newValue, oldValue) {
    if(newValue == true)
    {
        unwatch();
    }
});

So, once your variant becomes true, the watch on it is removed, and the binding gets stopped.

var app = angular.module( "Demo", [] );

app.controller(
  "AppController",
  function( $scope ) {
    $scope.count = 0;
    $scope.after_unwatch = false;

    var unbindWatcher = $scope.$watch(
      "count",
      function( count ) {
        alert( "Watching click count." );
        if ( count >= 5 ) {
          $scope.after_unwatch = true;
          unbindWatcher();
        }

      }
    );


  
    $scope.incrementCount = function() {
      $scope.count++;
    };

  }
);

<html>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <div  ng-app="Demo" ng-controller="AppController">
    <h1>
      Unbinding $watch() Listeners In AngularJS
    </h1>

    <p>
      <a ng-click="incrementCount()">Click it for five times, and after that watch on `count` is removed.</a>
      &raquo;

    </p>

    <p ng-show="after_unwatch">
      <em>The watch on click is removed.</a>
    </p>
  </div>
 </body>
</html>

Run this code

Here is a plunker

edited Oct 18, 2016 at 5:52

answered Oct 18, 2016 at 5:33

Sravan

18.7k3 gold badges34 silver badges54 bronze badges

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

4 Comments

Asim K T Over a year ago

Thanks. So you are saying angular will stop watching on that variable completely? even it's dependent on other places like DOM?

Sravan Over a year ago

yes, once you put that scope variable in $watch function, its scoped is removed based on a condition.

Sravan Over a year ago

let me give you an example, posting it.

Asim K T Over a year ago

No. I switched tasks now. Thinks it will work okay for me. Thanks @Sravan

K Scandrett · Accepted Answer · 2016-10-18 05:23:24Z

2

The docs say:

One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value.

So you could start with an undefined value.

answered Oct 18, 2016 at 5:23

K Scandrett

16.6k4 gold badges43 silver badges69 bronze badges

3 Comments

Asim K T Over a year ago

In my case, It will start with false. It's a huge codebase. I have limits to do that.

K Scandrett Over a year ago

In case Sravan's answer doesn't work for your specific case, you could use a different undefined variable for the ngIf, and then monitor variant's state, updating that variable appropriately. Not optimal, but with difficult constraints sometimes that's the best we can manage

Asim K T Over a year ago

That's a nice way doing that.

Collectives™ on Stack Overflow

Angular One-time bind conditionally OR unbind listener when a specific value is set

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related