angularJS: Error: $scope is not defined

Question

I want to run a service that read total unread message when user visits a few particular page. I'm using resolve for this. I set up a factory which communicates with the backend through a http call and the backend returns the count of total messages and I wanna show this in html page but all I am getting is error.

( function () {

    var countAllUnreads = function($location, $q, AuthService3) 
    {
        var deferred = $q.defer();
        AuthService3.fetchUnreadNotifications().then(function (res)
      {
        console.log('this is me');
        $scope.numOfNotifications =res.data.totalUnread;
      });
    }
    angular.module('myApp', [
        'ngRoute',
        'myApp.login',
        'myApp.home',
        'myApp.directory',
        'myApp.forgotpassword',
        'myApp.myProfile',
    ])

    .factory('AuthService3', ["$http", "$location", function($http, $location){
       var baseUrl = 'api/';
      var fetchUnreadNotifications = function()
       {

        return  $http.post(baseUrl + 'getAllUnreadNotifications');        
      }    

        return {fetchUnreadNotifications: fetchUnreadNotifications} ; 
    }])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
        .when('/login', {
            controller: 'LoginController',
            templateUrl: 'app/components/login/loginView.html',     
            controllerAs: 'vm'
        })
        .when('/forgotpassword', {
            controller: 'ForgotpasswordController',
            templateUrl: 'app/components/forgotpassword/forgotpasswordView.html',
            controllerAs: 'vm'
        })
        .when('/directory/:directoryType', {
            controller: 'DirectoryController',
            templateUrl: 'app/components/directory/directoryView.html',
            resolve: {notifications:countAllUnreadsn,},     
            controllerAs: 'vm'
        })
        .when('/home', {
            controller: 'HomeController',
            templateUrl: 'app/components/home/homeView.html',
            resolve: {notifications:countAllUnreadsn,},         
            controllerAs: 'vm'          
        })
        .when('/myprofile', {
            controller: 'MyProfileController',
            templateUrl: 'app/components/profile/myProfileView.html',
            resolve: {notifications:countAllUnreadsn,},     
            controllerAs: 'vm'
        })
        .otherwise({
            redirectTo: '/login'
        });
    }]);

})();

controllers are all there. This is the file from where routing happens and I use resolve to send an http call from here. So, there is no need for a controller here although there is controller for every page. To reduce ambiguity, I didn't include them. @Subash — version 2
– version 2, Commented Aug 18, 2016 at 11:28
$scope wouldn't be avilable inside resolve method, it should only return a desired result from promise — Pankaj Parkar
– Pankaj Parkar, Commented Aug 18, 2016 at 11:41

Parthasarathy · Accepted Answer · 2016-08-18 11:43:34Z

3

The problem is that you are using $scope within the function which loads notifications. $scope will not be available there since it might not be created yet. You need to return a promise and the resolved value can be injected as a dependency to the controller.

var countAllUnreads = function($location, $q, AuthService3) 
    {
        var deferred = $q.defer();
        AuthService3.fetchUnreadNotifications().then(function (res)
      {       
        deferred.resolve(res.data.totalUnread);
      });

       return deferred.promise;
    };

And in your controllers, have a dependency for 'notifications'.

Ex: function HomeController($scope, $http, notifications){ }

edited Aug 18, 2016 at 11:43

answered Aug 18, 2016 at 11:33

Parthasarathy

2,8281 gold badge14 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

version 2 Over a year ago

What do you mean by dependancy for notifications? Should that be a service or a call. i guess not. Or, is there a way I can store this in controller? @Sarathy

Parthasarathy Over a year ago

Not sure how you declare your controllers. Just like $http, $scope, you need to add an additional parameter named 'notifications' for the controller which should match the property name provided in your route configuration for 'resolve'. Have a look at the example for HomeController I had provided in the answer. The result of your service call in method countAllReads will be injected by Angular as 'notifications'. No need for any additional service call.

Parthasarathy Over a year ago

Look at this post by Scott Allen. It should help. odetocode.com/blogs/scott/archive/2014/05/20/…

version 2 Over a year ago

But this controoler where I want value to be shown is a common controller..It's a controller for header...so no navigation occurs to it. so, it's not listed in routes. @Sarathy

Parthasarathy Over a year ago

Is this header the same for authenticated pages and unauthenticated pages?

|

Collectives™ on Stack Overflow

angularJS: Error: $scope is not defined

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related