Question

为什么我的控制器执行两次？

我做了很多测试并返回相同的结果，它会影响我的应用程序吗？

＆＃13;

<html ng-app="todoApp">
  <head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
	<script>
	"use strict";
    angular.module('todoApp', [])
      .controller('TodoListController', function() {
        var todoList = this;
		var i = 0;
     
        todoList.addTodo = function() {
          console.log(1)
			i++;
			// return i it breaks the script
        };
      });
	</script>
  </head>
  <body ng-controller="TodoListController as todoList">
	{{todoList.addTodo()}}
  </body>
</html>

＆＃13;

Answer 1

Angular摘要周期存在问题。 addTodo()将在循环运行的频率下执行，从1到几次迭代。

你的Angular模板表达式（{{}}）中的

，绑定到范围变量，而不是函数，除非你知道你做了什么（它只绑定到幂等的getter函数）。并计算控制器中这些变量的值。像这样：

<html ng-app="todoApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script>
    "use strict";
    angular.module('todoApp', [])
      .controller('TodoListController', function() {
        var todoList = this;
        var i = 0;

        todoList.addTodo = function() {
          console.log(1)
            i++;
            return i;
        };

        todoList.todo = todoList.addTodo();
      });
    </script>
  </head>
  <body ng-controller="TodoListController as todoList">
    {{todoList.todo}}
  </body>
</html>

Answer 2

你的控制器没有执行两次，你的函数addTodo执行了两次。发生这种情况会导致角度渲染视图两次。

将角度$watch读取到不足以及为什么{{}}执行两次。

在观察者注册范围后，监听器fn是异步调用（通过$ evalAsync）来初始化观察者。在在极少数情况下，这是不可取的，因为在何时调用侦听器 watchExpression的结果没有改变。检测这种情况在监听器fn中，您可以比较newVal和oldVal。如果这两个值是相同的（===）然后监听器被调用初始化。

AngularJs基本应用程序执行两次

2 个答案: