如何使用 Angular Firebase 3 路数据绑定正确同步集合？答案

【问题标题】：How to correctly synchronise collection using Angular Firebase 3-way data bindings?如何使用 Angular Firebase 3 路数据绑定正确同步集合？
【发布时间】：2014-02-23 15:55:53
【问题描述】：

我正在使用 Angular、Firebase 和 3 路数据绑定。

我也在使用过滤器，所以活动项目（状态1）列在顶部，项目暂停（状态2） 列在底部。当然这只是过滤的一个例子：

<todo ng-repeat="item in todos | orderByPriority | filter: {state: 1}"></todo>

在使用 Angular 和 Firebase 的 3 路绑定时，似乎会产生奇怪的后果。

1。当新项目添加到集合中时，所有其他项目都会暂时消失。为什么？

http://plnkr.co/edit/aamS7aX5Oun4hCuoDqf5?p=preview
http://youtu.be/YauwP5Qw4vA

下面的基本代码：

$scope.firebaseURL = "https://flickering-date.firebaseio-demo.com/";
$scope.todos = [
    {name: 'post to stack overflow', state: 1, dateAdded : new Date(2013,1,1)}, 
    {name: 'plunker', state: 2, dateAdded : new Date(2013,2,2)},
    {name: 'github', state: 3, dateAdded : new Date(2013,3,3)},
    {name: 'mailing list', state: 1, dateAdded : new Date(2013,4,4)}
];
$scope.state = 1;

$scope.$firRef = $firebase(new Firebase($scope.firebaseURL + "todos/"));
$scope.$firRef.$bind($scope, "todos").then(function(unbind) {
  $scope.unbindFunctionUnused = unbind;
});

指令中的链接函数：

            var intervalId = $interval(function() {
                var squared = scope.item.counter * scope.item.counter;
                element.find(".squared").html(squared);
                scope.item.counter++;
            }, 1000);

最初我认为它与 Date 对象有关，但整数也会发生类似的奇怪行为。（见下文）

2。对于本地数组，填充数字的平方可以正常工作。对于与 Firebase 同步的数组，不显示任何值（它偶尔会闪烁）。

http://plnkr.co/edit/UGlk3Yhohs4GHyvHU7BO?p=preview
http://youtu.be/6iLOYc14XRY

下面的基本代码

$scope.firebaseURL = "https://flickering-counter.firebaseio-demo.com/";
$scope.todosFirebase = [
    {name: 'plunker firebase', counter : 11, state: 1 },
    {name: 'github firebase', counter: 22, state: 2},
    {name: 'stack overflow firebase', counter: 33, state: 3}
];
$scope.todos = [
    {name: 'plunker', counter : 11, state: 1 },
    {name: 'github', counter: 22, state: 2},
    {name: 'stack overflow', counter: 33, state: 3}
];
$scope.state = 1;

$scope.$firRef = $firebase(new Firebase($scope.firebaseURL + "todos/"));
$scope.$firRef.$bind($scope, "todosFirebase").then(function(unbind) {
  $scope.unbindFunctionUnused = unbind;
});

$scope.addItem = function() { // note that we add to both instances
    $scope.todosFirebase.$add({name: $scope.newItem, state: $scope.state, counter: 0});
    $scope.todos.push({name: $scope.newItem, state: $scope.state, counter: 0});
}

指令中的链接函数：

        var intervalId = $interval(function() {

            var added = new Date(scope.item.dateAdded).getTime();
            var now = new Date().getTime();
            var diff = new Date(now - added);

            element.find(".timeelapsed").html(diff.toString());
        }, 1000);

昨天我问了相关问题 - How to correctly disassociate $firebase AngularJS binding? - 它还涉及 Firebase、Angular 和 3 路数据绑定。今天我想进一步调查，但我有点卡住了......

我想做什么：

我将一个项目添加到列表中
它有一个柜台
每 1 秒刷新一次
效果很好

（由于某种原因，我无法在我的设置中使用它）

【问题讨论】：

标签： javascript angularjs firebase angularfire

【解决方案1】：

我实际上想对这个问题投反对票：]

解决办法简单到令人尴尬：

var _updateFunction = function() {
    var squared = scope.item.counter * scope.item.counter;
    element.find(".squared").html(squared); 
    scope.item.counter++;
}

var intervalId = $interval(_updateFunction, 1000);

_updateFunction(); // <-- cpt Obvious

【讨论】：