My factory AngularJS run 2 times?

Question

My index.php

<!doctype html>
<html lang="en" ng-app="abc">
<head>
    <meta charset="utf-8">
    <title>Google Phone Gallery</title>
    <base href="" />
</head>
<body>

    <div ng-controller="test">
        {{sayhello()}}
    </div>


</body>
<script src="js/core/angular.min.js"></script>
<script src="js/modules/example/controllers/controller.js"></script>
</html>

My controller.js:

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

app.factory('greeter', function($rootScope){
    return{
        greet: function(){
            alert('run');
        }
    }
});
app.controller('test', function($scope, greeter){
    $scope.sayhello = function(){
        greeter.greet();
    }
});

Can you guys tell me, why my alert ran twice?

But if I change:

<div ng-controller="test">
    {{sayhello()}}
</div>

To:

<div ng-controller="test">
    <input type="button" value="Click 2 run" ng-click="sayhello()">
</div>

It runs only once? Can you guys tell me how?

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

It is by design.

All angular expressions including the interpolation string {{sayhello()}} and those in $watch() will be re-evaluated repeatedly (for each $digest cycle), to detect changes in model and update views accordingly.

Even an empty $watch() will behave the same, see #1305 for a discussion.

If you would like to understand more on how the databinding of angularjs and its digest cycle works, read this post:

How does data binding work in AngularJS?

edited May 23 '17 at 11:49

Community

1
1

answered Aug 05 '14 at 16:39

runTarm

11,537
1
37
37

Thx runTarm for answering – AHSR0x Aug 06 '14 at 00:21

score 0 · Accepted Answer · answered Aug 05 '14 at 16:40

What you're seeing is how Angular's digest cycle works. It will keep evaluating expressions that the view is bound to until nothing has changed. This means it has to evaluate the binding at least twice. In this case, both times the expression evaluated to undefined, and the digest cycle stops.

To only evaluate it once, assign the value to a property on the scope...

<div ng-controller="test">
    {{greeting}}
</div>

app.controller('test', function($scope, greeter){
    $scope.sayhello = function(){
        greeter.greet();
    };
    $scope.greeting = $scope.sayhello();
});

Fiddle

My factory AngularJS run 2 times?

2 Answers2