Question

我正在尝试使用用户名和密码创建一个简单的登录模式。为此，我使用工厂处理控制器的登录变量：

.factory('userFactory', function($http) {
    var userInfo = {
        isLogged: false
    };  
    return {
        getUserInfo: function () {
            return userInfo;
        },


        loginNonce: function(loginObj) {
            return $http.get('http://exmple.com/?json=get_nonce&controller=auth&method=generate_auth_cookie').success(
            function(data, status, headers, config) {
                var nonce = data.nonce;
            }); 
        },

        login: function(loginObj) {
            var nonce = loginObj.nonce; 
            return $http.get('http://example.com/?json=auth/generate_auth_cookie&nonce='+nonce+'&username='+loginObj.username+'&password='+loginObj.password).success(function(data, status, headers, config) {
                if (data.status == 'ok') {

                    var userInfo = {
                        isLogged: true,
                        username: data.user.username,
                        userAvatar: data.user.avatar,
                        firstName: data.user.firstname,
                        lastName: data.user.lastname
                    }
                    return userInfo;
                } else {
                    var userInfo = {
                        isLogged: false,
                        username: '',
                        errorMsg: data.error
                    }
                    return userInfo;
                }
            })
            .error(function(data, status, headers, config) {
                var userInfo = {
                        isLogged: false,
                        username: '',
                        errorMsg: 'Server Error!'
                }
                return userInfo;
            });

        }
    }

});

我有一个启动模态并处理登录尝试的登录控制器：

var loginController = function($scope, $http, $modal, userFactory) {
    $scope.userInfo = userFactory.getUserInfo();
    $scope.logged = $scope.userInfo.isLogged;
    $scope.open = function() {
        $scope.modalInstance = $modal.open({
        templateUrl: 'views/modal.html',
        controller: ModalInstanceCtrl,
        size: 'lg',
        resolve: {
            userInfo: function () {
                return $scope.userInfo;              
          }
        }
      });
    }
    $scope.login = function() {
        var loginObj = {
            username: $scope.username,
            password: $scope.password
        }
        var results = userFactory.login(loginObj);
        userFactory.loginNonce().then(function(data) {
            var nonce = data.data.nonce;
            loginObj.nonce = data.data.nonce;
            userFactory.login(loginObj).then(function(data) {
                if(data.data.error) {
                    $scope.errorMsg = data.data.error;
                } else {
                    $scope.ok();
                }
            }); 
        });
    }   
}

这是模态实例控制器：

var ModalInstanceCtrl = function($scope, $modalInstance, $http, userFactory, userInfo) {
    $scope.userInfo = userFactory.getUserInfo(); 
    $scope.ok = function () {
        $modalInstance.close($scope.results);
        console.log(userInfo);
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}

这是loginController部分看起来的样子：

<div  id="main_bar" class="header" ng-controller="loginController">
  <ul class="nav nav-pills pull-right" >

    <li class="col-sm-3 col-md-3 col-lg-2 row  pull-right  userBlock" ng-show="logged"><div class="barAvatar" style="background-image: url({{ userAvatar }});"></div><div class="userName">{{ userFirstName }} {{ userLastName }} <span ng-click="logout()">Logout</span></div></li>
    <li ng-hide="logged" ><a ng-href="" ng-click="open()">Login</a></li>
    <li ng-hide="logged"><a ng-href="#/register">Signup</a></li>
  </ul>

</div>

这是登录控制器的部分模板，显示当前用户的信息：

登录过程正常，并且工厂设置了正确的变量。但是，我似乎无法将更新的userInfo对象放入loginController's范围。我使用过控制台，所以我知道工厂工作正常。我知道这可能是一个简单的范围问题，但我所尝试的一切都无法发挥作用。

Answer 1

您需要向模式添加成功回调，以便能够在LoginController范围内更新userInfo。只有在控制器获得实例化时才会对$ scope.userInfo进行第一次赋值。

$scope.open = function() {
    $scope.modalInstance = $modal.open({
    templateUrl: 'views/modal.html',
    controller: ModalInstanceCtrl,
    size: 'lg',
    resolve: {
        userInfo: function () {
            return $scope.userInfo;              
      }
    }
  }).result.then(function (userInfo) {
    $scope.userInfo = userInfo;
    // Or
    $scope.userInfo = userFactory.getUserInfo();
  });
}

同样在你的模态中，你使用resolve和userFactory获取相同的信息，你只需要两个中的一个。你的登录功能不应该在ModalInstanceCtrl中吗？

Answer 2

由于范围继承，我通常使用dot.notation我的所有范围变量。我有一个$ scope.user.info。这样你就可以读取范围链并使用该变量。（复杂的阅读：https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance）

Angular.js $ modal范围问题

2 个答案: