I use Ionic and AngularFire for make a chat, but I have problem: the following error
TypeError: Cannot read property '$add' of undefined at Scope.$scope.sendChat (controllers.js:12)
prevents me to advance in my work. I don't understand where I can found the solution.
This is my code in controller.JS:
angular.module('starter.controllers', ['firebase'])
.factory("Chats", function($firebaseArray) {
var itemsRef = new Firebase("https://<MYFIREBASE>.firebaseio.com/chats");
return $firebaseArray(chatsRef);
})
.controller('ChatsCtrl', ['$scope', '$rootScope',
function($scope, Chats, $rootScope) {
$scope.sendChat = function(chat) {
$scope.chats.$add({
user: 'guest',
message: chat.message
});
chat.message = "";
};
}])
This is my code in HTML :
<ion-view view-title="Chats">
<ion-content>
<div class="list">
<a class="item item-avatar">
<img>
<h2>{{ chat.user }}</h2>
<p>{{ data.text }}</p>
</a>
</div>
<form>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Message" ng-model="chat.message">
</label>
<button class="button button-assertive ion ion-ios-chatbubble" ng-click="sendChat(chat)"></button>
</div>
</div>
</form>
</ion-content>
</ion-view>
Can I found a charitable soul to help me?
Try this,
angular.module('starter.controllers', ['firebase'])
.factory("Chats", function($firebaseArray) {
var itemsRef = new Firebase("https://<MYFIREBASE>.firebaseio.com/chats");
return $firebaseArray(itemsRef);
})
.controller('ChatsCtrl', ['$scope', '$rootScope', 'Chats', '$firebaseArray',
function($scope, $rootScope, Chats, $firebaseArray) {
$scope.chats = Chats;
$scope.sendChat = function(chat) {
$scope.chats.$add({
user: 'guest',
message: chat.message
});
chat.message = "";
};
}
]);
Shouldn't you be returning $firebaseArray(itemsRef)instead of $firebaseArray(chatsRef) in Chats service?? A typo??
Injected, Chats service, $firebaseArray in controller.
Hope this helps!
The most obvious issue is you need to either reference the $firebaseArray or $firebaseObject modules in your Controller to use the AngularFire methods.
.controller('ChatsCtrl', ['$scope', '$rootScope', '$firebaseArray', function($scope, Chats, $rootScope, $firebaseArray) {
But if this is you complete Controller code theres other issues like you need to populate the $scope.chats object with your Service data
$scope.chats = Chats;