Javascript 若我们从html页面调用角度函数，那个么它将如何工作？_Javascript_Html_Angularjs_Function

Javascript 若我们从html页面调用角度函数，那个么它将如何工作？

javascript html angularjs function

Javascript 若我们从html页面调用角度函数，那个么它将如何工作？,javascript,html,angularjs,function,Javascript,Html,Angularjs,Function,在下面的代码中，$scope.contactList包含一个联系人列表，每个联系人都有一个isActive标志如果我们从控制器调用$scope.getInactiveCount，它将给出非活动联系人的计数如果我们从HTML调用该函数呢？它会在DOM加载时执行一次还是每次都执行每当在列表中添加新联系人时，$scope.getInactiveCount函数将如何触发我想知道从HTML页面调用角度函数时它们的流程 app.js angular.module('demo',[]).control

在下面的代码中，

$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>


从HTML调用角度函数
非活动联系人计数：{{getInactiveCount（）}}

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

在您的示例中，页面正在加载。Angular脚本一启动，模型（

$scope.contactList

）就被加载

一旦完成，一个$compile过程就开始了。这个编译过程编译DOM并查找角度事件和数据绑定。在您的示例中，它将找到

getInactiveCount（）

双向数据绑定和

ng click=“addContact（…）”

，并将它们添加到角度监视程序中。现在，一个摘要周期将开始把观察者变成变量

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

getInactiveCount（）

函数

只要角度上的变量发生变化，例如单击“添加触点”按钮，就会调用摘要循环。将调用

addContact（）

函数，更改

$scope.contactList（）

并调用摘要循环。现在，

getInactiveCount（）

数据绑定将调用该函数，并更新显示的值

您可以阅读有关引导过程的更多信息：。

它在加载

DOM

时执行一次。这是一种避免将函数放入插值

{}

绑定的方法，因为该函数将在每个摘要循环中调用。有时，每个摘要循环会多次，直到结果稳定。请参阅Sand3r205可能的感谢副本。它帮助我了解了执行情况：）