javascript - angularFire 3 路数据绑定(bind)不会更新函数

Question

我有一个 firebaseObject (MyFirebaseService.getCurrentUser()) 绑定(bind)到 $scope.user。绑定(bind)成功后，我循环该对象以查看该对象是否包含等于某个值($stateParams.id)的“linkedCourseId”。如果是，则 $scope.finishLessonCount 计数。问题是，当我通过其他页面或在 firebase 内部添加新对象到 firebaseObject (绑定(bind)到用户)内时， finishLessonCount 值不会像我对 3 路绑定(bind)所期望的那样改变。我需要刷新页面才能看到 finishLessonCount 反射(reflect)真实值。怎么了？当我将更多完成的类(class)添加到 firebaseObject 中时，我希望使用比较函数更改 finishLessonCount。请参阅下面的代码:

MyFirebaseService.getCurrentUser().$bindTo($scope, "user").then(function(){

        for (var key in $scope.user.finishedLessons) {
            if ($scope.user.finishedLessons.hasOwnProperty(key)) {

                if ($scope.user.finishedLessons[key].associatedCourseId == $stateParams.id) {
                    $scope.finishLessonCount++;
                }
            }
        };
        console.log ($scope.finishLessonCount);
    });

更新 1 根据 @Kato 解决方案:我决定使用Extending firebaseOject的方式来解决这个问题。但仍然没有。我在这里没有使用工厂来简化事情，因为我需要传入 courseId 来进行操作。这是我的代码:

       function countLessons(lessons, courseId) {
       var count = 0;
       for(var key in lessons) {
          if( lessons[key].associatedCourseId ==  courseId) {
             count++;
          }
       }
       return count;
    }

    var UserWithLessonsCounter = $firebaseObject.$extend({
      $$updated: function(snap) {
         var changed = $firebaseObject.prototype.$$updated.call(this, snap);
         this.lessonCount = countLessons(this.finishedLessons, $stateParams.id);
      }
    });

    var refTemp = new Firebase($rootScope.baseUrl + "users/" + $rootScope.userId);
    var userTemp = new UserWithLessonsCounter(refTemp);

    userTemp.$bindTo($scope, "userTemp").then(function(){
        console.log($scope.userTemp);
    });
    userTemp.$watch(function() {
      console.log("Does this run at all? " + $scope.userTemp.lessonCount);
   });

我更新了用户对象，lessonCount值没有改变，除非我刷新页面。并且$watch里面的console.log根本没有运行。怎么了？

Answer 1

$bindTo 返回的 Promise 只被调用一次。它不是事件监听器。您无法在每次发生更改时收听此内容以获取更新。

请阅读the guide ，从头到尾，阅读 Angular 的 $watch继续沿着这条路线前进之前的方法，就像一些基础知识一样，这不应该是您的第一直觉。

初学者的方法是使用 $watch:

MyFirebaseService.getCurrentUser().$bindTo($scope, "用户");

$scope.$watch('user', function() {
   for (var key in $scope.user.finishedLessons) {
      if ($scope.user.finishedLessons.hasOwnProperty(key)) {
        if ($scope.user.finishedLessons[key].associatedCourseId == $stateParams.id) {
          $scope.finishLessonCount++;
        }
      }
   };
   console.log ($scope.finishLessonCount);
});

或者，熟悉 AngularFire API ，人们可能会选择 $scope.user.$watch() 代替 scope 方法，这会更有效。

在编写了大部分 AngularFire 代码后，我会选择 $extend 工具，该工具正是针对如下用例添加的:

// making some assumptions here since you haven't included
// the code for your firebase service, which does not seem SOLID
app.factory('UserWithLessonsCounter', function($firebaseObject) {
   return $firebaseObject.$extend({
      $$updated: function(snap) {
         var changed = $firebaseObject.prototype.$$updated.call(this, snap);
         this.lessonCount = countLessons(this.finishedLessons);
         return changed;
      }
   });
});

function countLessons(lessons) {
   var count = 0;
   for(var key in lessons) {
      if( lessons.hasOwnProperty(key) ) {
         count++;
      }
   }
   return count;
}

现在在你的 Controller 中:

app.controller('...', function($scope, UserWithLessonsCounter) {
   var ref = new Firebase(...);
   var user = new UserWithLessonCounter(ref);
   user.$bindTo($scope, 'user');

   user.$watch(function() {
      console.log($scope.user.lessonCount);
   });
});