Firebase AngularFire $save 不需要的结果

Question

我想要实现的是允许以前创建的表单可编辑和更新。

例如，我想将属性division: 的值从"Mens" 更改为"Womens"，但这是我得到的结果。

代码更新前的 Firebase 数据库。

// from https://myapp.firebaseio.com/seasons/-K52aSeDHqvBVlg4KRSW

-K52aSeDHqvBVlg4KRSW
    └ aaaCreatedOn: 1449611877062
    └ aaaUpdatedOn: 1449611877062
    └ division: "Mens"
    └ ...

代码更新后的 Firebase 数据库。

// from https://myapp.firebaseio.com/seasons/-K52aSeDHqvBVlg4KRSW

-K52aSeDHqvBVlg4KRSW
    └ aaaCreatedOn: 1449611877062
    └ aaaUpdatedOn: 1449611877062
    └ division:
        └ division: "Womens"
    └ ...

我希望它像下面这样。

-K52aSeDHqvBVlg4KRSW
    └ aaaCreatedOn: 1449611877062
    └ aaaUpdatedOn: 1449611877062
    └ division: "Womens"
    └ ...

要更新表单的 url 是 localhost/sport/app/#/update/season/-K52aSeDHqvBVlg4KRSW

来自我的控制器的代码。

(function() {

    angular
        .module('sportApp')
        .controller('CreateSeasonController',
                    ['$routeParams', '$firebaseArray', '$firebaseObject', 'FIREBASE_URL',
                    function($routeParams, $firebaseArray, $firebaseObject, FIREBASE_URL) {

            var vm = this;
            vm.whichSeason = $routeParams.sid;

            var seasonUpdateRef = new Firebase(FIREBASE_URL + 'seasons/' + vm.whichSeason);
            var seasonUpdateArray = $firebaseArray(seasonUpdateRef);
            var seasonUpdateObject = $firebaseObject(seasonUpdateRef);

            // Populates form with data from https://myapp.firebaseio.com/seasons/-K52aSeDHqvBVlg4KRSW
            seasonUpdateObject.$loaded().then(function() {
                vm.name = seasonUpdateObject.name;
                vm.league = seasonUpdateObject.league;
                vm.division = seasonUpdateObject.division;
                vm.level = seasonUpdateObject.level;
                vm.weekday = seasonUpdateObject.weekday;
                vm.seasonal = seasonUpdateObject.seasonal;
                vm.year = seasonUpdateObject.year;
                vm.numberOfGame = seasonUpdateObject.numberOfGame;
                vm.startDate = new Date(seasonUpdateObject.startDate);
                vm.endDate = new Date(seasonUpdateObject.endDate);
            });

            vm.update = function() {
                seasonUpdateArray[2].division = vm.division;
                seasonUpdateArray.$save(2).then(function(ref) {
                    vm.message = 'Season ' + vm.name + ' was updated successfully';
                });
            };

        }]);
})();

Answer 1

这里没有理由使用$loaded()，$firebaseObject() 会在数据加载时触发$digest() 循环。

另外，您仍在使用$firebaseArray()，但没有使用它。

var seasonUpdateRef = new Firebase(FIREBASE_URL + 'seasons/' + vm.whichSeason);
var seasonUpdateObject = $firebaseObject(seasonUpdateRef);
vm.season = seasonUpdateObject;

因此，您无需手动分配每个字段，只需将整个 $firebaseObject() 分配给 vm。当数据加载时，$digest() 会更新页面。

这是一个可用于 Firebase 引用注入的巧妙技巧。

.constant('FirebaseUrl', '<my-firebase-app>')
.service('rootRef', ['FirebaseUrl', Firebase);
.factory('Season', function($firebaseObject, rootRef) {
  return function Season(season) {
    return $firebaseObject(rootRef.child(season));
  }
})
.controller('MyCtrl', function($routeParams, Season) {
  var vm = this;
  vm.whichSeason = $routeParams.sid;
  vm.season = Season(vm.whichSeason);
});

Answer 2

找到了解决办法。

不要使用$firebaseArray，而是使用$firebaseObject。

(function() {

    angular
        .module('sportApp')
        .controller('CreateSeasonController',
                    ['$routeParams', '$firebaseArray', '$firebaseObject', 'FIREBASE_URL',
                    function($routeParams, $firebaseArray, $firebaseObject, FIREBASE_URL) {

            var vm = this;
            vm.whichSeason = $routeParams.sid;

            var seasonUpdateRef = new Firebase(FIREBASE_URL + 'seasons/' + vm.whichSeason);
            var seasonUpdateArray = $firebaseArray(seasonUpdateRef);
            var seasonUpdateObject = $firebaseObject(seasonUpdateRef);

            // Populates form with data from https://myapp.firebaseio.com/seasons/-K52aSeDHqvBVlg4KRSW
            seasonUpdateObject.$loaded().then(function() {
                vm.name = seasonUpdateObject.name;
                vm.league = seasonUpdateObject.league;
                vm.division = seasonUpdateObject.division;
                vm.level = seasonUpdateObject.level;
                vm.weekday = seasonUpdateObject.weekday;
                vm.seasonal = seasonUpdateObject.seasonal;
                vm.year = seasonUpdateObject.year;
                vm.numberOfGame = seasonUpdateObject.numberOfGame;
                vm.startDate = new Date(seasonUpdateObject.startDate);
                vm.endDate = new Date(seasonUpdateObject.endDate);
            });

            vm.update = function() {

                seasonUpdateObject.aaaUpdatedOn = Firebase.ServerValue.TIMESTAMP;
                seasonUpdateObject.name = vm.name;
                seasonUpdateObject.league = vm.league;
                seasonUpdateObject.division = vm.division;
                seasonUpdateObject.level = vm.level;
                seasonUpdateObject.weekday = vm.weekday;
                seasonUpdateObject.seasonal = vm.seasonal;
                seasonUpdateObject.year = vm.year;
                seasonUpdateObject.numberOfGame = vm.numberOfGame;
                seasonUpdateObject.startDate = vm.startDate.toString();
                seasonUpdateObject.endDate = vm.endDate.toString();

                seasonUpdateObject.$save().then(function(ref) {
                    vm.message = 'Season ' + vm.name + ' was updated successfully';
                });
            };

        }]);
})();