AngularJS - 这个演示应用程序中的功能触发器在哪里

AngularJS - where is the function trigger in this demo-app?

本文关键字：功能 触发器 在哪里 应用程序 AngularJS      更新时间：2023-09-26

我刚开始使用AngularJS，想知道这个小型演示应用程序是如何工作的：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>

更新文本区域内容是否会触发函数"left（）"？

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

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

氪，米兰

每个$digest周期，angular 都会更新 DOM 中的绑定。它将在作用域上调用 left() 函数以获取该值。这就是它的来历。

在角度中有一个循环，称为$digest循环

循环角核心的 Evry 迭代重新评估每个绑定，因此在您的情况下，您正在执行此操作<span ng-bind="left()"></span>因此每个摘要循环都将执行 left（） 函数。

ng-bind告诉span将其值绑定到left()（或$scope.left()）的结果。因为它是绑定的，所以它将等待任何更改并相应地更新span。来自W3C雄辩的解释：

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

从文档中：

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

相关文章：