Angular: scope variable vs function

Question

What is better in Angular - to bind to a variable or to a function. In particular:

Is there any performance penalty due to digest calls or additional watches that are created for a function?
Are there any recommendations for what scope functions should and shouldn't do?

Example for two options:

<!-- With function -->
<button ng-disabled="noDataFoo()">Add</button>

<!-- With variable -->
<button ng-disabled="noDataFlag">Add</button>

Backing controller:

app.controller('sample', function($scope, $http) {
    $scope.noDataFlag = true;

    $scope.noDataFoo = function () {
        return !$scope.data;
    };

    $http('/api/getdata').success(function(data) {
        $scope.data = data;
        $scope.noDataFlag = false;
    };
});

Joe · Accepted Answer · 2014-06-08 14:52:24Z

2

I'm not a javascript performance expert or anything, but my naive opinion would be that the variable would out perform the function by MAYBE a couple of nanoseconds because it's a 2 step process.

Also, the example above would be just as easily accomplished using:

<button ng-disabled="!data">Add</button>

answered Jun 8, 2014 at 14:52

Joe

2,5962 gold badges16 silver badges12 bronze badges

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

1 Comment

Ilia Barahovsky Over a year ago

Thank you very much for your answer. I see that I haven't fully explained my intentions. My concern is - how often Angular computes the function. Probably there exist Angular recommendation for not binding to functions. The example in question is simplified, in application function is longer and it depends on return value from several APIs. Which makes status variable difficult to manage...

Ilia Barahovsky · Accepted Answer · 2014-07-03 15:20:40Z

2

I made some tests and counted how many times the function is called under different circumstances. It occurs, the function is called the number of times it has binding, sometimes twice the number and it seems to happen after each external activity, like page reload or button click or AJAX call.

In simple words, if you have <button ng-disabled="noDataFoo()"> and then {{noDataFoo()}} in HTML, the function will be called 4 times at page load, then another 2 or 4 times if some $http service brings data, and another 2 or 4 times if some other button was clicked. From experiments, the number is 2 if noDataFoo doesn't change and 4 if it does change. By the way, the same holds for clicks on another controller.

My conclusion is: it's OK to bind to quick functions. For longer ones it's better to keep number of bindings small. And for even longer ones it's wiser to cache the result and handle "manually" cache updates.

answered Jul 3, 2014 at 15:20

Ilia Barahovsky

10.6k8 gold badges43 silver badges53 bronze badges

1 Comment

bhantol Over a year ago

This is old but I point out that scope variable should be the first choice for some of the reasons you stated.

Collectives™ on Stack Overflow

Angular: scope variable vs function

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related