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; }); } } /... }参数注入。

{{1}}

传递工厂返回值以在Angularjs中查看

1 个答案: