Question

在下面的代码中，$scope.contactList包含每个联系人都带有isActive标记的联系人列表。

如果我们从控制器调用$scope.getInactiveCount，那么它将给出非活动联系人的计数。

如果我们从HTML调用该函数怎么办？每次加载或执行DOM时它会执行一次吗？

每当在列表中添加新联系人时，$scope.getInactiveCount功能将如何触发？

我想知道从HTML页面调用角度函数的流程。

app.js

angular.module('demo',[]).controller('demoController',function($scope){

    $scope.contactList=[{firstName:'John',lastName:'Moody',isActive:'Y'},
                       {firstName:'Chris',lastName:'George',isActive:'Y'},
                       {firstName:'Anabella',lastName:'Maze',isActive:'N'},
                       {firstName:'Joseph',lastName:'Butler',isActive:'Y'},
                       {firstName:'Roni',lastName:'Ray',isActive:'N'},
                       {firstName:'Tim',lastName:'Cook',isActive:'Y'},
                       {firstName:'Angel',lastName:'Christina',isActive:'N'}];

    $scope.getInactiveCount=function(){
        var count=0;
        $scope.contactList.forEach(function(d){
            if(d.isActive=='N')
                count++;
        })
        return count;
    };

    $scope.addContact=function(firstName,lastName){
        var contact={firstName:firstName,lastName:lastName,isActive:'N'};
        $scope.contactList.push(contact);
    }
});

的index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Calling Angular function from HTML</title>
        <script src="angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <div data-ng-app='demo'>
            <div data-ng-controller='demoController'>
                Inactive contacts count: {{getInactiveCount()}}
                <br/>
                <div>
                    <input type=text ng-model="firstname">
                    <input type=text ng-model="lastname">
                    <br>
                    <input type='button' value='Add contact' ng-click='addContact(firstname,lastname)' >
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

AngularJS有一个双向数据绑定系统，这意味着只要模型（数据）发生变化，Angular就会重新计算视图。

在您的示例中，页面正在加载。一旦Angular Script启动，就会加载模型（$scope.contactList）。

一旦完成，就会启动$ compile进程。此编译过程编译DOM并查找Angular Events和Data-Bindings。在您的示例中，它将找到getInactiveCount()双向数据绑定和ng-click="addContact(...)"，并将这些添加到Angular观察器。现在，摘要周期将开始将观察者变为变量。

在每个摘要周期中，检查双向数据绑定的变化，并运行函数以查看结果是否发生变化。这意味着每个摘要周期都会调用getInactiveCount()函数。

只要Angular上的变量发生变化，就会调用摘要循环，例如，当您单击“添加联系人”按钮时。将调用addContact()函数，$scope.contactList()更改并调用摘要周期。现在getInactiveCount()数据绑定将调用该函数，并且将更新显示的值。

您可以阅读有关引导过程的更多信息：AngularJS Developer Guide - Bootstrap。

如果我们从html页面调用angular函数那么它将如何工作？

1 个答案: