具有ui-路由器的AngularJS :更改来自子控制器的父依赖项的值

Question

Environment：具有嵌套状态的AngularJS应用程序(使用UI路由器)。

短版本：如何从子控制器内部更改父状态依赖项的值，以便同时使用该依赖项的子状态兄弟姐妹将获得新值。

长版本：采用以下配置：

shopApp.config(function($stateProvider) {
    $stateProvider.state('shop', {
        url : '/shop',
        templateUrl : 'shop.html',
        resolve : {
            user : function($q) {
                // callback that ends up returning null 
                // because the user is not logged in
            }
        },
        controller: function($scope, user) {
            // user is null at this point
            $scope.user = user;
        }
    }).state('shop.login', {
        url : '/login',
        templateUrl : 'login.html',
        controller : function($scope) {
            // onLoggedIn is called from some form-processing
            // logic once the user has successfully logged in
            $scope.onLoggedIn = function(userObject) {
                // I want the shop.userDetails state's controller
                // to get the new $scope.user value
                $scope.user = userObject;
                $state.go('^.userDetails');
            };
        }
    }).state('shop.userDetails', {
        url : '/userDetails',
        templateUrl : 'userDetails.html',
        controller : function($scope, user) {
            // Unfortunately user is null here
            $scope.user = user;
        }
    });
});

shop.login状态的控制器有一个名为onLoggedIn的函数，该函数在用户成功登录后被调用。包含用户信息的对象传递给此函数。从这一点开始，我希望用户依赖项的所有解析都使用这个值(即userObj)。不幸的是，没有使用刚才分配给$scope.user的值，传递给shop.userDetails控制器的值似乎是在创建商店状态控制器时最初解析的值。

有人知道怎么做吗？如果我做错了请告诉我。

Answer 1

实现所需功能的一种方法是定义一个保存已登录用户信息的UserDetailsService。您可以在登录时设置用户信息，并使用服务解析user值。

Answer 2

有一种使用语义更多的作用域对象的非常简单的方法：

看看您的问题，我想，您需要在这里建模的相关信息是，而不仅仅是用户，它可以是空的，并且在登录期间更改哪个会导致您的问题。相反，您希望共享应用程序的登录状态(或者应用程序状态，在更一般的情况下)，即是用户登录，从何时开始，哪个用户等等。这也是一个很好的设计，因为您将信息放在一起，这些信息可能会被更改或扩展。因此，不要使用一个可以为null并因此在错误的作用域中创建的单个属性，而是使用一个复杂的属性，该属性将在最顶层的作用域中创建，在其下面将被共享和可见，在您的代码示例中，这个属性将在shopController中创建：

// in ShopController
$scope.loginState = { logggedin: false, user: null }; 
// could add time information, grants and other stuff here as well

// in LoginController
$scope.loginState.loggedin = true;  
$scope.loginState.user = user;  
// crucial: this will only change the attributes at the object in ShopControllers Scope

在您的可以直接使用{{loginState.user}}的用户详细模板中，用户将从父范围(商店)中获取，在父范围内，它将由同级(shop.login)设置。

这是可行的，因为与模板中的一样，如果您访问范围属性读取，则范围层次结构会被自下而上地扫描，直到该属性被找到为止。当然，您必须小心，不要在更深的作用域中分配#loginState本身。但是，您可以在顶级范围内使用和更改公共loginState对象的属性(甚至创建新属性)。

但是，如果您喜欢在模板中使用{{user}，例如，为了使其更易读和更可重用，则可以通过以下方法轻松地做到这一点：

// in UserDetailController
$scope.user = $scope.loginState.user;   

这是可行的，因为在您的示例中，UserDetailController将在从shop.login切换到shop.userdetail后重新初始化。在其他情况下，您可能希望在$scope.loginState上使用手表、创建事件$userLoggedIn或类似的方法。