如何在不保存的情况下更新多个 Firebase 引用？

Question

见下方更新

我有一个 Angular 应用程序，该应用程序在该控制器的页面上有一个控制器和一个指令，它们都引用相同的 firebase 数据（我有充分的理由将它们分开）。当我对一个参考进行更改时，除非我保存数据，否则其他参考不会反映更改。无需保存数据即可更新所有本地 Firebase 引用的最佳方法是什么。我想让用户在保存之前查看他/她的更改会是什么样子。

我有一个可以说明我遇到的问题的 plunker。输入一个输入，在您保存之前，其他输入都不会更新。我希望它们在用户输入时保持同步。

http://jsfiddle.net/dberringer/F7MVB/2/

function MyCtrl($scope, $firebase) {
    var ref1 = $firebase(new Firebase("https://fiddler.firebaseio.com/test1"));
    ref1.$on('value', function () {
        $scope.foo = ref1;
    });

    $scope.save1 = function () {
        ref1.$save();
    };

    var ref2 = $firebase(new Firebase("https://fiddler.firebaseio.com/test1"));
    ref2.$on('value', function () {
        $scope.bar = ref2;
    });

    $scope.save2 = function () {
        ref2.$save();
    };

    $scope.bas = $firebase(new Firebase("https://fiddler.firebaseio.com/test1"));
    $scope.saveBas = function () {
        $scope.bas.$save();
    };

    $scope.biz = $firebase(new Firebase("https://fiddler.firebaseio.com/test1"));
    $scope.saveBiz = function () {
        $scope.biz.$save();
    };
}

谢谢！！

更新： 对不起。我应该更清楚。我发布的小提琴只是说明问题的一种快速而肮脏的方式。这是对情况的更准确表示，以及为什么能够在不保存的情况下传播更改会有所帮助。我试图弄清楚是否有一种开箱即用的好方法可以将一个 firebase 引用上的更改传播到另一个 firebase 引用，而无需用户将数据保存到 firebase。也许我需要触发一个方法或一个事件来告诉所有引用更新以匹配 .那会很甜蜜。

如您所见，我所有的模型逻辑都在 myModel 工厂中。我的控制器又好又薄。 my-things 指令可能存在也可能不存在于任何给定页面上，因此该指令直接访问模型，而不是通过控制器的范围。我的控制器不需要为他们可能需要或不需要的指令注入一堆模型。在使用 firebase 时，走这条路感觉非常干净和自然。如果这是不可能的，人们是否有另一种方式来装配模型，与 Firebase 资源交互，这将有助于实现这一点？再次感谢！

http://jsfiddle.net/dberringer/F7MVB/5/

angular.module('myApp',['firebase'])
    .factory('myModel', function ($q, $firebase) {
        var fbRef = $firebase(new Firebase("https://fiddler.firebaseio.com/"));
        return {
            getThings: function (id) {
                var deferred = $q.defer(),
                    ref1 = fbRef.$child(id);

                // Resolves the promise once the data is loaded from firebase
                ref1.$on('loaded', function (data) {
                    deferred.resolve(ref1);
                });

                return deferred.promise;
            }
        }
    })

    .directive('myThings', function (myModel) {
        return {
            template:   '<div>Hello, {{thingsListB.thing1}}!</div>',
            restrict: 'A',
            scope: {
                elemId: '@myThings'
            },
            link: function postLink(scope, iElement, iAttr) {
                myModel.getThings(scope.elemId).then(function (things) {
                    scope.thingsListB = things;
                });
            }
        }
    })

    .controller('myCtrl1', function($scope, myModel) {
        myModel.getThings('test1').then(function (things) {
            $scope.thingsListA = things;
        });

        // Something like this might do the trick
        // $scope.$watch('thingsListA', function () {
        //  $scope.thingsListA.$heyIChanged();
        // });
    })

    .controller('myCtrl2', function($scope) {
        $scope.foo = 'foo';
    });

Answer 1

这里有几件事：

调用$firebase(ref)会自动加载数据

当您使用引用调用 AngularFire 绑定 $firebase 时，它会自动加载数据。 在这种情况下，相同的数据被加载了四次。

编辑：从 AngularFire 0.8 开始，这不再适用。加载数据调用$asObject()或$asArray()。

与 ng-model 在本地同步，然后在准备好后保存到 Firebase

要让数据在本地同步，我们不需要使用多个 AngularFire 绑定。只需使用ng-model 和相同的保存功能，我们就可以在本地同步内容。一旦数据准备好保存到 Firebase，我们就可以处理操作了。

我们可以通过使用一个 AngularFire 绑定并监听它的变化来简化它。要使更改在本地同步，我们可以共享相同的 ng-model 以及相同的 save 函数。

JSFiddle Demo

var myApp = angular.module('myApp',['firebase']);

function MyCtrl($scope, $firebase) {
    var ref1 = $firebase(new Firebase('https://fiddler.firebaseio.com/test1'));
    
    $scope.thing1 = '';

    ref1.$on('value', function(data) {
       $scope.thing1 = data.snapshot.value.thing1;
    });
    
    $scope.save = function () {
        ref1.$child('thing1').$set($scope.thing1);
    };
}

查看

<div ng-controller="MyCtrl">
    <div>Hello, {{thing1}}!</div>
    <input type="text" ng-model="thing1"/>
    <button ng-click="save()">Save 1</button>

    <div>Hello, {{thing1}}!</div>
    <input type="text" ng-model="thing1"/>
    <button ng-click="save()">Save 2</button>

    <div>Hello, {{thing1}}!</div>
    <input type="text" ng-model="thing1"/>
    <button ng-click="save()">Save 3</button>

    <div>Hello, {{thing1}}!</div>
    <input type="text" ng-model="thing1"/>
    <button ng-click="save()">Save 4</button>
</div>

来自您的更新

我上面提到的仍然适用。您要做的是跨 Firebase 实例“同步”数据而不保存。它不是那样工作的。 $firebase 绑定会立即从该位置的 Firebase 加载所有数据。因此，您不能“本地”同步它们。

不过，这没关系，因为我们仍然可以使用 Angular 在本地进行同步，然后在准备好后提交数据。

在您的指令中，我们实际上可以摆脱模型和链接功能。这个指令现在基本上变成了ng-bind。

JSFiddle Demo

.directive('myThings', function (myModel) {
    return {
        template:   '<div>Hello, {{myThings}}!</div>',
        restrict: 'A',
        scope: {
            myThings: '@'
        },
        link: function postLink(scope, iElement, iAttr) {
            
        }
    }
})

然后在视图中更改属性 my-things 以使用绑定。

<div ng-controller="myCtrl1">
    <div>This is page 1</div>
    <div>Hello, {{thingsListA.thing1}}!</div>
    <input type="text" ng-model="thingsListA.thing1"/>
    <button ng-click="thingsListA.$save()">Save</button>

    <div my-things="{{thingsListA.thing1}}"></div>
</div>

这种方式更简洁，因为我们在 then 指令和控制器之间共享属性，而不是在两个地方创建它。