传递工厂 return 值以在 Angularjs 中查看

Question

我有一个 html 视图、angularjs 控制器和一个身份验证服务。这是代码：

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;
                        });

                };

页面加载后，用户属性在状态配置中解析，这在 html 中作为范围属性可用。我遇到的问题是当用户登录时，作用域上的用户属性没有更新，之前我在 $rootScope 上有用户属性但我希望它成为本地范围的属性并在用户登录但不工作时使用该服务更新 Base.html 文件。我将不胜感激一些帮助来弄清楚我做错了什么以及我缺乏关于范围属性的知识我也阅读了文档和其他问题，但也许有一些我不理解的地方。

Answer 1

您需要 return AuthSvc.isLoggedIn().then(...) 生成的承诺。 $stateProvider 将等待它解析并将结果作为 user 参数注入。

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

传递工厂 return 值以在 Angularjs 中查看

Passing a factory return value to view in Angularjs

javascript

angularjs

angularjs-scope