角度控制器调用函数两次答案

【问题标题】：Angular controller calling function twice角度控制器调用函数两次
【发布时间】：2017-06-28 17:25:29
【问题描述】：

我正在创建一个待办事项列表应用程序并希望拥有它，因此当任务存在超过 5 秒时，该任务会被 console.logged 为过期。但目前该任务被记录两次。

模板：

    <h2>Active</h2>
       <div class = "container">
          <div class="tasks">
             <ul>
                <li ng-repeat= "task in home.tasks" class="task">{{task.task}}{{home.time(task)}}</li>
            </ul>
          </div>
       </div>

控制器：

    (function(){
       function HomeCtrl(Task, $timeout){
          // Tasks
          this.tasks = Task.all;

          //Adding tasks
          this.taskName = null;
          this.addTask = Task.addTask;

          //Expired
          this.time = Task.createdAt;

      }
      angular
          .module('Blocitoff')
          .controller('HomeCtrl', ['Task', '$timeout', HomeCtrl]);
    })();

服务：

(function(){
    angular
        .module('Blocitoff')
        .factory('Task', ['$firebaseArray', Task])

    function Task($firebaseArray){

        var ref = firebase.database().ref().child("tasks");
        var tasks = $firebaseArray(ref);



        return {
            all: tasks,

            addTask: function(){
                    tasks.$add({ task: this.taskName, timeCreated: (Date.now())}).then(function(ref) {
                      var id = ref.key;
                      console.log("added record with id " + id);
                      tasks.$indexFor(id); // returns location in the array
                    });
               alert(this.taskName + " has been added to active tasks");
            },

            createdAt: function(task){
                if(Date.now() - task.timeCreated > 5000){
                    console.log(task.task + " has expired");
                };
            }
        };

    }

})();

【问题讨论】：

哪个控制台消息被打印了两次？
你有很多东西叫task，很难说你在说什么。 {{home.time(task)}} 是一个在摘要周期内将被多次调用的函数。是那个吗？
是的 {{home.time(task)}} 是被多次调用的函数。我只希望它被调用一次。正确的称呼方式是什么？

标签： angularjs firebase firebase-realtime-database

【解决方案1】：

{{home.time(task)}} 将观察者绑定到函数，并将在摘要周期内执行多次。

来自文档：

$watch(watchExpression, listener, [objectEquality]);

注册一个listener 回调以在watchExpression 更改时执行。

每次调用$digest() 时都会调用watchExpression，并且应该返回将被监视的值。（watchExpression 不应在使用相同输入多次执行时更改其值，因为它可能会被$digest() 多次执行。也就是说，watchExpression 应为idempotent。）

— AngularJS $rootScope/$scope API Reference - $watch

【讨论】：