火力地堡回调和AngularJS [英] Firebase callbacks and AngularJS

问题描述

我学习与火力地堡一起AngularJS。我真的火力地堡的在回调挣扎，并试图更新 $范围 ...

I am learning AngularJS in conjunction with Firebase. I am really struggling with the on callback of Firebase and trying to update the $scope...

$apply already in progress <----

    var chat = angular.module('chat', []);
   chat.factory('firebaseService', function ($rootScope) {
  var firebase = {};
  firebase = new Firebase("http://gamma.firebase.com/myUser");
  return {
    on: function (eventName, callback) {
      firebase.on(eventName, function () {  
        var args = arguments;
        $rootScope.$apply(function () {
          callback.apply(firebase, args);
        });
      });
    },
    add: function (data) {
      firebase.set(data);
    }
  };
});

chat.controller ('chat', function ($scope, firebaseService) {
    $scope.messages = [];
    $scope.username;
    $scope.usermessage;              
    firebaseService.on("child_added",function(data){        
        $scope.messages.push(data.val());       
    });
    $scope.PushMessage = function(){
        firebaseService.add({'username':$scope.username,'usermessage':$scope.usermessage});   
    };
});

如果我走 $ rootscope。$适用出那么它将按预期工作，但它不更新页面加载DOM。

If I take the $rootscope.$apply out then it works as expected but it doesn't update the DOM on page load.

谢谢！

更新

解决方案1 ​​ - 对服务中删除 $ rootscope $适用并注入并应用 $超时来。控制器：

Solution 1 - Remove the $rootscope.$apply on the service and inject and apply the $timeout to the controller:

firebaseService.on('child_added',function(data){        
    $timeout(function(){
        $scope.messages.push(data.val());                       
    },0);
});

解决方案2 - 实施SafeApply的方法（感谢亚历Vanston ）：

$scope.safeApply = function(fn) {
        var phase = this.$root.$$phase;
        if(phase == '$apply' || phase == '$digest') {
            fn();
        } else {
            this.$apply(fn);
        }
    };

虽然这些都工作，并没有太大的code，我觉得他们太哈克。是不是有一些官方角度以何种方式处理异步回调？

Although these both work and are not much code I feel they are too hacky. Isn't there some offical Angular manner in which to handle Async callbacks?

另一个很好的例子，我发现了类似的情况：的HTML5Rocks - AngularJS和Socket .IO

Another great example I found for a similar situation: HTML5Rocks - AngularJS and Socket.io

推荐答案

解决方案1 ​​ - 删除$ rootscope $适用于服务和注入并应用$超时到控制器：

Solution 1 - Remove the $rootscope.$apply on the service and inject and apply the $timeout to the controller:

firebaseService.on('child_added',function(data){        
    $timeout(function(){
        $scope.messages.push(data.val());                       
    },0);
});

解决方案2 - 实施SafeApply的方法（感谢Alex Vanston）：

Solution 2 - Implement a "SafeApply" method (thanks to Alex Vanston):

$scope.safeApply = function(fn) {
        var phase = this.$root.$$phase;
        if(phase == '$apply' || phase == '$digest') {
            fn();
        } else {
            this.$apply(fn);
        }
    };

这篇关于火力地堡回调和AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！