20

コードは単純です：

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
</head>
<body ng-controller="MainCtrl">
  Hello {{name()}}!
</body>
</html>
<script>
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name= function() {
    console.log("---name---:" + new Date());
    return "Freewind";
  };
});

</script>

name関数があり、それを本体で1回だけ呼び出すことがわかります。しかし、コンソールでは、次の2回印刷され---name---:ます。

---name---:Wed Feb 20 2013 14:38:12 GMT+0800 (中国标准时间)
---name---:Wed Feb 20 2013 14:38:12 GMT+0800 (中国标准时间)

ここでライブデモを見ることができます：http：//plnkr.co/edit/tb8RpnBJZaJ73V73QISC ？p = Preview

関数name()が2回呼び出されたのはなぜですか？

4

1 に答える 1

42

AngularJS では、二重中括弧で囲まれたものはすべて、ダイジェスト サイクル中に少なくとも 1 回評価される式です。

AngularJS は、何も変更がなくなるまで継続的にダイジェスト サイクルを実行することで機能します。それが、ビューが最新であることを保証する方法です。関数を呼び出したので、関数を 1 回実行して値を取得し、2 回目に何も変更がないことを確認しています。次のダイジェスト サイクルで、少なくとももう一度実行されます。

nameまさにこの理由から、テンプレートからべき等メソッド ( など) のみを呼び出すことをお勧めします。

于 2013-02-20T06:49:13.787 に答える