{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 叛逆 的问题《Firebase/Angular: Messages not showing in HTML, bu》','https://www.manongdao.com/q-1006615.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Good day SO,
I am trying to incorporate a basic firebase chat module into my system via angular js (I am honestly not proficient at all..)
I am facing a problem whereby my items are not showing in my HTML element although my firebase messages are being retrieved from my firebase database.
Here is my HTML code:
<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>
And here is the angular.js code:
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()
})
}
})
And now, here is the funny thing.. My messages are being retrieved (I put a dash '-' behind {{ m.messages }} so that a dash will print for each message in my firebase database (To show that they are being retrieved), but my messages are not being shown.
Here is a screenshot of my firebase (Note: has 7 messages currently):
And here is a screenshot of my HTML page (It shows 7 dashes for 7 items in my firebase):
Although I have checked my scope in the javascript code, as well as the namings in my firebase database, my messages are still unable to show.. But I am able to send messages via my page to the firebase database. (The button and send functions are working!) The only problem now is showing the messages..
I am at a loss.. Please help me SO! I will promptly reply to any posts here :) Thank you so much!
Edit: If i use {{m|json}}:
I have solved the rendering problem using the
{%verbatim%}tag.