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"
    └ ...

表格更新的网址是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';
                });
            };

        }]);
})();

Firebase AngularFire $保存不需要的结果

2 个答案: