Question

我正在使用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秒刷新一次
它正常工作

（出于某种原因，我无法在我的设置中使其工作）

Answer 1

enter image description here

我其实想为这个问题投降自己：]

解决方案非常简单：

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

相关：Execute the setInterval function without delay the first time

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

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

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

1 个答案: