2017-03-26 4 views
0

J'essaye d'implémenter un exemple de chat simple en utilisant Angular et Firebase. Il fonctionne bien sur Safari, mais il gèle Chrome et Firefox (fonctionnant sur une base locale ou distante). Quelqu'un at-il une idée de ce qui ne va pas sur mon code? Merci pour toute aide!AngularFire exemple simple fige Chrome et Firefox

<html ng-app="ZzzzApp"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/3.7.2/firebase.js"></script> 
    <script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script> 

    <script type="text/javascript"> 
     var app = angular.module('ZzzzApp',['firebase']); 

     app.controller("ChatController", function($scope, $firebaseArray){ 
      var config = { 
       apiKey: "AIzaSyA8nk5dSF8HKUSQr_2H04hwTRZ2NWDwSOE", 
       authDomain: "chattest-9fe81.firebaseapp.com", 
       databaseURL: "https://chattest-9fe81.firebaseio.com", 
       storageBucket: "chattest-9fe81.appspot.com", 
       messagingSenderId: "353125975278" 
      }; 
      firebase.initializeApp(config); 

      var ref = firebase.database().ref().child('12345'); 
      $scope.messages = $firebaseArray(ref); 

      $scope.addMessage = function(){ 
       $scope.messages.$add({direction: 'S', message: $scope.messageToSend}); 
       $scope.messageToSend = ''; 
      }; 
     }); 
    </script> 
</head> 

<body> 
    <div ng-controller="ChatController">  
     <div ng-repeat="message in messages"> 
      <p>{{message.message}}</p> 
     </div>  
     <input type="text" class="form-control" ng-model='messageToSend'> 
     <button type="button" class="btn btn-default" ng-click='addMessage()'>Send</button> 
    </div>  
</body> 

+0

vous manque un 'ng-app' sur votre' body' tag: ''. Voir un exemple de travail ici: http://jsbin.com/qucomu/edit?html,js,output. Cet exemple fonctionne bien dans Chrome 56 pour moi. –

+0

Tnx pour m'aider, ng-app peut être situé à la balise HTML, comme je l'ai fait. Je remarque que mon script fonctionne quand il s'exécute depuis StackOverflow, mais il se fige quand il s'exécute localement. J'ai essayé votre exemple, mais il semble n'avoir aucune permission d'écrire sur Firebase, donc j'ai pointé ma base de données et l'ai gelée à nouveau. –

+0

Vous n'avez en effet pas d'autorisations d'écriture sur la base de données dans mon exemple. Mais la lecture fonctionne. Quelle action spécifique donne des problèmes dans notre configuration locale. S'il vous plaît fournir une [** ** complète reproduction complète du problème] (http://stackoverflow.com/help/mcve): si les lectures ne sont pas la cause, ne les incluez pas dans le repro. –

Répondre

3

On dirait que c'est un bug dans Firebase^3.7.1. Avait le même problème et est tombé sur un autre answer. Essayez la version en spécifiant Firebase:

dependencies: { "firebase": "3.7.0", "angularfire": "^2.3.0" ... }

+0

C'était tout !!!! Parfait! Merci beaucoup!!! –

+0

Il semble que ce même problème soit couvert dans Github sous https://github.com/firebase/angularfire/issues/924. Je recommande le suivi là pour une solution. –

0

Je ne sais pas quel est le problème - comment vos données sont structurées?

Essayez de changer la fonction addMessage comme ceci:

$scope.addMessage = function(){ 
    $scope.messages.$add({direction: 'S', message: $scope.messageToSend}) 
    .then(() => $scope.messageToSend = '') 
}; 

Juste pour être sûr que vous ne videz la messageToSend, après avoir réussi à été ajouté au tableau firebase. Toute sortie dans votre console?

+0

Merci pour votre aide. Il n'y a pas d'erreur sur la console, ça me rend fou. Ce code est fonctionnel, sauvegardez-le et lancez-le localement pour voir le problème par vous-même. –