angularfire $ watch（）一个属性，而不是整个对象？ （firebase，angular）

Question

有没有办法观察对象中的一个属性何时发生变化？我试过了

var unwatch = obj.$watch(function() {
  console.log("data changed");
});

当对象中的任何属性发生更改时触发。我试过了

var unwatch = obj.myProperty.$watch(function() {
  console.log("data changed");
});

返回了一条错误消息：＆＃34; TypeError：obj.myProperty。$ watch不是函数＆＃34;。

我试过

var myTargetValue = $firebaseObject(ref.myProperty);

返回了一条错误消息：＆＃34; TypeError：无法读取属性＆＃39; ref＆＃39;未定义＆＃34;。

Answer 1

您必须为该属性创建$firebaseObject。但是，使用Firebase SDK往往比$watch()更有用。

<强> JSBin Demo

angular.module('app', ['firebase'])
  .constant('FirebaseUrl', 'https://34474165.firebaseio-demo.com/')
  .service('rootRef', ['FirebaseUrl', Firebase])
  .controller('MyCtrl', MyController);

function MyController($scope, $firebaseObject, rootRef) {
  var objRef = rootRef.child('obj');
  var obj = $firebaseObject(objRef);
  var objMessage = $firebaseObject(rootRef.child('obj/message'));

  // watch the whole object
  var unwatch = obj.$watch(function(a) {
    console.log(a);
  });

  // watch a child property
  objMessage.$watch(function(a) {
    console.log(a, 'msg');
  });

  // get the whole object as it changes
  objRef.on('value', function(snap) {
    console.log(snap.val());
  });

  // get the child property as it changes
  objRef.child('message').on('value', function(snap) {
    console.log(snap.val());
  });
}

Answer 2

简短回答 - 使用vanilla Firebase（即不要使用Angularfire）

要使用Angularfire观察字符串，数字或布尔属性，最好使用vanilla Firebase：

// firebase reference
db = firebase.database().ref().child("myTable");

// watch the property
db.child("someProperty").on("value", function(snapshot) {
  $scope.message = snapshot.val();
});

为什么不使用Angularfire和$ value：

使用$firebaseObject并传入对基元的引用（string，number，boolean）返回如下所示的对象（reference documentation）：

{
  $id: "myProperty", 
  $priority: null, 
  $resolved: true, 
  $value: "Hi mom!"
}

在这个例子中，我想要观察的字符串包含在返回对象的$ value属性中。我倾向于将$ value属性分配给$scope，但这不起作用：

// WONT WORK 
$scope.foo = $firebaseObject(db.child("myProperty")).$value;

Angular的对象命名约定和Firebase的对象命名约定之间存在冲突，这会导致一些麻烦。根据文档中的这个"Important Note"，Angular的$watch函数忽略了带有$前缀的属性。换句话说，如果将返回对象的$value属性分配给$scope，则视图不会更新。

因此，最好只使用vanilla firebase来解决这个问题（见上）。希望人们觉得这很有帮助。