Question

我刚开始使用AngularJS，并想知道这个小型Demo-App是如何工作的： http://www.w3schools.com/angular/angular_application.asp

以下是完整代码：

<html ng-app="myNoteApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-controller="myNoteCtrl">

<h2>My Note</h2>

<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

<p>
<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>
</p>

<p>Number of characters left: <span ng-bind="left()"></span></p>

</div>

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

</body>
</html>

应用程序文件“myNoteApp.js”：

var app = angular.module("myNoteApp", []);

控制器文件“myNoteCtrl.js”：

app.controller("myNoteCtrl", function($scope) {
    $scope.message = "";
    $scope.left  = function() {return 100 - $scope.message.length;};
    $scope.clear = function() {$scope.message = "";};
    $scope.save  = function() {alert("Note Saved");};
});

问题：函数left（）是如何被触发的？

这里有一个“ng-model”数据绑定（双向数据绑定？）：

<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

更新textarea内容是否会触发“left（）”函数？

<p>Number of characters left: <span ng-bind="left()"></span></p>

我不明白AngularJS在这里做了什么......谁或什么使左（）函数调用？

KR，米兰

Answer 1

每个$ digest循环，angular更新DOM中的绑定。它将调用范围上的left()函数来获取该值。这就是它的来源。

Answer 2

在角度中有一个叫做$ digest循环的循环

循环角度核心的evry迭代重新评估每个绑定，所以在你的情况下你正在执行这个<span ng-bind="left()"></span>所以每个摘要周期都会执行left（）函数。

Answer 3

ng-bind告诉span将其值绑定到left()（或$scope.left()）的结果。因为它已绑定，它将等待任何更改并相应地更新span。从W3C的不言而喻的解释：

ng-bind指令将控制器函数left（）绑定到显示左边字符的<span>

来自the docs：

ngBind属性告诉Angular将指定HTML元素的文本内容替换为给定表达式的值，并在该表达式的值更改时更新文本内容。

AngularJS - 这个demo-app中的函数触发器在哪里？

3 个答案: