Подтвердить что ты не робот

Почему angularjs дважды вызывает функцию `name()`?

Код прост:

<!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, и мы вызываем ее в тело только один раз. Но в консоли он печатает дважды ---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() вызывается два раза?

4b9b3361

Ответ 1

В AngularJS все, что завернуто в двойные фигурные скобки, expression, которое оценивается по крайней мере один раз в течение цикла дайджест.

AngularJS работает путем непрерывного цикла дайджеста, пока ничего не изменится. То, как оно обеспечивает представление, является актуальным. Поскольку вы вызвали функцию, она запускает ее один раз, чтобы получить значение, а затем второй раз, чтобы увидеть, что ничего не изменилось. В следующем цикле дайджест он будет работать как минимум еще раз.

Как правило, хорошая идея просто вызывать методы idempotent (например, name) из шаблона именно по этой причине.