How to implement JavaScript closures in AngularJS?

Question

I am using a function to count the number of clicks on the button as shown below:

$scope.counterFunc = (function(){
    var count = 0;
    console.log('i will be consoled only once');
    return function(){
        console.log(count);
        return ++count;
    }
})();

View:

<button ng-click="counterFunc()">click me</button>
<div>  
    {{ count value }}
</div>

I am able to console the count value, but how can i display it in the view.

I can use $scope variable to bind count value to view but my concern is that the count should not be altered by any other function outside the counterFunc()

Is there any other way to do this?..

Vipin Kumar · Accepted Answer · 2017-12-12 05:48:05Z

1

Your counterFunc() is already returning the incremented value each time it is executed by ng-click. You can assign it to a variable on your view like this

<button ng-click="count = counterFunc()">click me</button>
<div>
  {{ count }}
</div>

Note that count property will be created by above solution in your $scope but that will be different from count variable inside your counterFunc() and changing $scope.count will not affect var count. You can test this by adding another button for resetting the value of $scope.count

<button ng-click="count = counterFunc()">click me</button>
<div>
  {{ count }}
</div>
<button ng-click="count = 0">Reset</button>

Now, you will see that each time you press Reset button, displayed value will become 0. But, when you press click me again, it will start from last value of var count.

edited Dec 12, 2017 at 5:48

answered Dec 12, 2017 at 5:40

Vipin Kumar

6,5661 gold badge21 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

How to implement JavaScript closures in AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related