Passing a factory return value to view in Angularjs

Question

I have a html view, angularjs controller and a authentication service. Here is the code:

Index.html:

<html>
<body>
<div ui-view></div>
</body>
</html>

Base.html:

  <div>
    <ul>
      <li ng-if="user">Logged in as {{user.username}}</li>
      <li ng-if="!user"><a ui-sref="base.login">Login</a>
    </ul>
 </div>

app.js:

$stateProvider
                .state('base', {
                    url: "",
                    templateUrl: "Base.html",
            resolve: {
                user : function(AuthSvc){
                AuthSvc.isLoggedIn().then(function(res){
                return res;
                },
                    function(res){
                    return res;
                    });
                }
            },
                    controller: 'PanelCtrl'
                })

Controller.js:

appControllers
    .factory("AuthSvc",
        ['$http', '$q',
        'messageCenterService', '$rootScope',
        '$state',
        function ($http,$q,
            messageCenterService,$rootScope,
            $state) {
return {
    login: function (credentials, form) {
        var defer = $q.defer();
        $http.post('/api/auth/login', credentials)
        .success(function (response) {
            form.$setPristine();
            messageCenterService.remove();
            messageCenterService.add('success',
                'You are now logged in!',
                {status: messageCenterService.status.next
                });
            $state.go('base.posts.content');

            defer.resolve(response);
            })
        .error(function (response) {
            messageCenterService.remove();
            messageCenterService.add('danger',
                response.flash,
                {status: messageCenterService.status.unseen});
            defer.reject();
        });
        return defer.promise;
                        },
isLoggedIn: function () {

    var defer = $q.defer();
    $http.get('api/auth/check').success(
            function (res) {
                defer.resolve(res);
            }).error(function (err) {


                defer.reject(false);
            });

    return defer.promise;
},


appControllers.controller('PanelCtrl',
        ['$scope', 'user', 'AuthSvc', 
        'vcRecaptchaService', '$idle', 
        function ($scope, user, AuthSvc, 
            vcRecaptchaService, $idle, ) {
                $scope.user = user;

                $scope.credentials = {"email": "", "password": "", "remember": ""};
                $scope.login = function (form) {
                    AuthSvc.login($scope.credentials, form)
                        .then(function(res){
                        $scope.user = res;
                        });

                };

After the page loads a user property is resolved in the state configuration and this is available in the html as a scope property. The problem I am having is when the user logins the user property on the scope is not updating, previously I had the user property on the $rootScope but I want it to become a property of the local scope and to use the service to update the Base.html file when user logins but it is not working. I would appreciate some help to figure out what I am doing wrong and also wheremy knowledge regarding scope properties is lacking I have read the documentation and other questions as well, but maybe there is something I am not understanding.

New Dev · Accepted Answer · 2015-08-30 01:05:33Z

1

You need to return the promise generated by AuthSvc.isLoggedIn().then(...). The $stateProvider will wait for it to resolve and inject the result as the user parameter.

resolve: {
   user : function(AuthSvc){
            // return the promise
            return AuthSvc.isLoggedIn()
               .then(
                  function(res){
                    return res;
                  },
                  function(res){
                    return res;
                  });
                }
          }
/...
}

edited Aug 30, 2015 at 1:05

answered Jan 27, 2015 at 21:40

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

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

1 Comment

def_con_6 Over a year ago

Thanks, that fixed most of the problems but still, I have to refresh the browser to update the user property on the scope. Shouldn't assigning $scope.user to the response from the server automatically update the view or do I have to use $scope.$watch()?

Collectives™ on Stack Overflow

Passing a factory return value to view in Angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related