为什么angularjs不必要地在每次输入更改时调用控制器函数以及如何停止该行为？

Question

为什么angularjs不必要地在每次输入更改时调用控制器函数以及如何停止该行为？

下面是一个非常简单的TODO应用程序构建与angularjs.

它到目前为止工作正常,但我的问题是angularjs继续在输入字段中调用evry键击上的"剩余"函数!! 下面的代码有什么问题吗？

<!doctype html>
<html ng-app>

<head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>

<body>
    <div>
        <h2>TODO:</h2>
        <div ng-controller="TodoCtrl">
            <span>{{remaining()}} of {{todos.length}} remaining</span> [ <a href="" ng-click="archive()">archive</a> ]
            <ul class="list-unstyled">
                <li ng-repeat="todo in todos">
                    <input type="checkbox" ng-model="todo.done" >
                    <span>{{todo.text}}</span>
                </li>
            </ul>
            <form ng-submit="addTodo()">
                <input type="text" ng-model="todo" placeholder="Enter your task here">
            <form>
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
    <!--script src="app.js"></script-->
    <script>
    function TodoCtrl($scope) {
        $scope.todos = [
            {text: 'learn angular', done:true},
            {text: 'build an angular app', done:false}
        ];

        $scope.remaining = function() {
            console.log('calling remaining()');
            var count = 0;
            angular.forEach($scope.todos, function(todo) {
                count += todo.done? 0:1;
            });

            return count;
        };

        $scope.addTodo =  function() {
            if($scope.todo)  {
                $scope.todos.push({text: $scope.todo, done:false});
            }
            $scope.todo = '';
        };
    }
    </script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

dta*_*enc 5

这是标准的角度行为.对模型或任何其他绑定或角度事件的任何更改,它将执行在示波器上设置的所有手表.这称为摘要周期,通常由$ scope触发.$ apply().这就是为什么不对从视图中的绑定表达式调用的函数进行任何繁重计算是非常重要的.

通常在具有对长列表进行某些计算或过滤的函数时会发生性能问题.如果这是一个问题,解决方案是在集合上设置监视,并仅在集合更改时将计算属性更新为范围中的separat变量.在您的示例中,这将防止在不相关的输入发生更改的情况下重新计算剩余项目.

归档时间：	12 年，1 月前
查看次数：	1864 次
最近记录：	12 年前