Question

我的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>

我的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();
    }
});

你们能告诉我，为什么我的警报会跑两次？

但如果我改变：

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

要：

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

它只运行一次？你们能告诉我怎么样吗？

Answer 1

这是设计的。

将重复评估包括插值字符串{{sayhello()}}和$watch()中的所有角度表达式（对于每个$digest周期），以检测模型中的更改并相应地更新视图。

即使空的$watch()行为相同，请参阅#1305进行讨论。

如果您想更多地了解angularjs及其摘要循环的数据绑定如何工作，请阅读以下文章：

How does data binding work in AngularJS?

Answer 2

您所看到的是Angular的消化周期是如何运作的。它将继续评估视图绑定的表达式，直到没有任何更改。这意味着它必须至少评估两次绑定。在这种情况下，表达式的两次都评估为undefined，并且摘要周期停止。

要仅评估一次，请将值分配给范围内的属性...

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

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

Fiddle

我的工厂AngularJS运行2次？

2 个答案: