CODEWITHSUNDEEP
firebaseangularfire
Satwik
Satwik

Reputation: 1321

Angularfire error : Firebase Object is not a function

I'm using angularfire to make a website but I'm not able to initialize firebase object in a controller. Here's my code

angular.module('displayApp').controller("ProductCtrl", function($scope, $firebaseObject,ProductDisplay) {
    this.products = ProductDisplay;

});

angular.module('displayApp').controller('descriptionCtrl', ['ProductDisplay','$stateParams','$firebaseObject',function (ProductDisplay,$firebaseObject,$stateParams) {
    var pid = 'productid1'
    var ref = new Firebase("https://bargainhawk.firebaseio.com/productDisplay/productid1");
    this.product =$firebaseObject(ref);

}])

This is my app.js file 

  var displayApp= angular.module('displayApp', ["firebase",'ui.router']);

    displayApp.value("DB_URL","https://bargainhawk.firebaseio.com/productDisplay");

    displayApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider,$urlRouterProvider) {
        $urlRouterProvider.otherwise("/");

        $stateProvider
        .state('home',
        {
            url:"/",
            templateUrl:"app/views/user/product-grid.html",
            controller:"ProductCtrl as collection"
        })
        .state('description',{
                url:'/product/{pid}',
            templateUrl:'app/views/user/description.html',
            controller:'descriptionCtrl as description'
        })  
        .state('description.chat',{
            url:'/chat',
            templateUrl:'app/views/user/chatWindow.html',

        })
    }])

Here's my factories file

angular.module('displayApp').factory("ProductDisplay", ["$firebaseObject","DB_URL",
    function ($firebaseObject,DB_URL) {
        var ref = new Firebase(DB_URL);
        return $firebaseObject(ref);    
    }])

The productCtrl is working but the descriptionCtrl is not. I can't find the mistake I'm making. I've tried the following code also

angular.module('displayApp').controller('descriptionCtrl', ['ProductDisplay','$stateParams','$firebaseObject',function (ProductDisplay,$firebaseObject,$stateParams) {
    var products = ProductDisplay;
    this.product = productDisplay.productid1;
    console.log(ProductDisplay);
    console.log(product);
}])

ProductDisplay Object is shown as it is at console but product is shown as undefined though the ProductDisplay has productid1 property.

Upvotes: 1

Views: 1395

Answers (1)

hdioui abdeljalil
hdioui abdeljalil

Reputation: 4685

Well if you check your descriptionCtrl you will find that the order of the params(dependencies) passed is not right

you typed :

angular.module('displayApp').controller('descriptionCtrl', ['ProductDisplay','$stateParams','$firebaseObject',function (ProductDisplay,$firebaseObject,$stateParams) {
    //...
}])

What you should have typed is : 

angular.module('displayApp').controller('descriptionCtrl', ['ProductDisplay','$stateParams','$firebaseObject',function (ProductDisplay,$stateParams,$firebaseObject) {

}])

change the position of $firebaseObject with $stateParams

hope this will fix your problem

Happy coding :)

Upvotes: 1

Related Questions