Angularjs one time binding is called twice

Question

Why is the one time binding called twice?

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.foo = function() {
        console.log('foo'); 
        return 'foo';
    }
});

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <span ng-bind="::foo()"></span>
        </div>
    </body>
</html>

The same is for the regular binding (during first digest).

One time binding doesn't mean the function won't be evaluated every digest. If you don't want it called then run it in controller once and set a variable to pass to view instead — charlietfl
– charlietfl, Commented Jul 31, 2017 at 11:27
Agree with you. I can be replaced with preliminary initialization. But it is not useful from general perspective if there are a lot of one time binding depend on some logic. — Tsimon Dorakh
– Tsimon Dorakh, Commented Jul 31, 2017 at 11:44
The performance gain comes from less watchers. You can't control how internals handle the digests — charlietfl
– charlietfl, Commented Jul 31, 2017 at 11:56

Ghulam Mohayudin · Accepted Answer · 2017-07-31 13:24:45Z

2

This is an issue in angular core, read this post where they have a detailed discussion on this issue, They have explained one time bindings are not the way we think, expression evaluation can be called multiple times.

answered Jul 31, 2017 at 13:24

Ghulam Mohayudin

1,11310 silver badges20 bronze badges

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

Comments

Jenny · Accepted Answer · 2017-07-31 11:34:46Z

-1

The binding function will be called at every digest even if it is one time binding. If you want to avoid this then use NgInit to call function once.

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.foo = function() {
        console.log('foo'); 
        return 'foo';
    }
});

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <span ng-init="::foo()"></span>
        </div>
    </body>
</html>

answered Jul 31, 2017 at 11:34

Jenny

6634 silver badges8 bronze badges

1 Comment

Tsimon Dorakh Over a year ago

The binding function will not be called at every digest if it is one time binding.

Collectives™ on Stack Overflow

Angularjs one time binding is called twice

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related