0

Bonjour SO,Firebase/angulaire: Les messages ne montrent en HTML, mais contiennent les objets de message

Je suis en train d'intégrer un module de chat firebase de base dans mon système via js angulaire (je suis honnêtement pas compétent du tout ..)

Je suis confronté à un problème où mes éléments n'apparaissent pas dans mon élément HTML bien que mes messages Firebase soient récupérés de ma base de données Firebase.

Voici mon code HTML:

<html lang="en" ng-app="chatApp"> 

... 

<section id="content3" class="tab-content"> 
    <div class="card mb-3"> 
     <div class="card-header"> 
      <i class="fa fa-comments-o"></i> 
       Instant Chat Messenger – Crisis Management Office 
     </div> 
     <div class="card-body" ng-controller="ChatController"> 
      <p ng-repeat="m in messages">{{m.message}}- </p> 
      <div class="form-row"> 
       <div class="form-group col-md-11"> 
        <input type="text" class="form-control" id="chatEntry" rows="14" placeholder="Type your message here" ng-model="messageText"> 
       </div> 
       <div class="form-group col-md-1"> 
       <button type="submit" class="btn btn-primary btn-block" id="sendBtn" ng-click="send()">Send</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

Et voici le code angularjs:

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

app.controller('ChatController', function($scope, $firebaseArray) { 

    var crisis = "Crisis1"; 

    //Query 

    var ref = firebase.database().ref().child(crisis).child('CMO-PMO'); 

    $scope.messages = $firebaseArray(ref); 

    $scope.send = function() { 
     $scope.messages.$add({ 
      sender: "PMO", 
      message: $scope.messageText, 
      date: Date.now() 
     }) 
    } 
}) 

Et maintenant, voici la chose drôle .. Mes messages sont récupérés (I mettre un tiret '-' derrière {{m.messages}} pour qu'un tiret s'imprime pour chaque message dans ma base de données firebase (pour montrer qu'ils sont récupérés), mais mes messages ne sont pas affichés. est un sc reenshot de mon firebase (Note: a 7 messages actuellement):

enter image description here

Et voici une capture d'écran de ma page HTML (Il montre 7 tirets pour 7 articles dans mon firebase):

enter image description here

Bien que j'ai vérifié ma portée dans le code javascript, ainsi que les noms dans ma base de données firebase, mes messages sont toujours incapables d'afficher .. Mais je peux envoyer des messages via ma page à la base de données firebase. (Le bouton et envoyer des fonctions fonctionnent!) Le seul problème maintenant est de montrer les messages ..

Je suis à perte .. S'il vous plaît aidez-moi SO! Je vais répondre rapidement à tous les messages ici :) Merci beaucoup!

Edit: Si j'utilise {{m | JSON}}:

enter image description here

+0

Au lieu de {{m.message}} - 'try' {{m | json}} - ', que faites-vous? –

+0

Salut! J'ai reçu une erreur: TemplateSyntaxError, Invalid filter: 'json', l'image est dans la question en bas, est-ce parce que je développe aussi en utilisant Django et Python? –

+0

Je viens de réaliser que l'analyse javascript est différente quand vous avez django/python dans .. Je ne trouve toujours pas un moyen de rendre les messages dans ma page HTML .. –

Répondre

0

J'ai résolu le problème de rendu en utilisant la balise {%verbatim%}.