UI 路由器和变量在从一种状态转换到另一种状态后不再位于 $scope 中的问题

Question

我有三种状态：一种抽象状态和两种具体状态继承自抽象状态。我正在从一种状态转换到另一种状态，我注意到在我转换到另一种状态后，在一种状态下 $scope 中的变量不再在 $scope 中：参见下面的 $scope.signupForm.member.email。

有人可以指点一下吗？

我的 UI 路由器配置：

$stateProvider
    .state('signup', {
        abstract: true,
        views: {
            '@': {
                templateUrl: 'signup/views/signup.html'
            }
        }
    })
    .state('signup.form', {
        url: '/signup',
        views: {
            '@signup': {
                controller: 'SignupCtrl',
                templateUrl: 'signup/views/signup.form.html'
            }
        }
    })
    .state('signup.success', {
        url: '/signup/success',
        views: {
            '@signup': {
                controller: 'SignupCtrl',
                templateUrl: 'signup/views/signup.success.html'
            }
        }
    })

来自我的控制器的相关片段：

signupService.signup($scope.signupForm)
                    .success(function () {
                        //TODO: issue with controller no longer being in scope: signupForm.member.email is not displayed in template
                        $state.go('signup.success');
                    });

我的电子邮件输入（来自 signup.form.html）：

<input type="email" name="email" 
     placeholder="{{'SIGNUP_FORM_EMAIL' | translate}}"
     ng-model="signupForm.member.email" ng-required="true" 
     ng-pattern="EMAIL_PATTERN"
     class="form-control"/>

我尝试显示电子邮件的位置（来自 signup.success.html）：

<div class="panel-body">
    success!
    check your email at: {{signupForm.member.email}}
</div>

编辑 1:

如果我将控制器上拉一级 - 将其置于抽象状态，即“注册”，那么 signupFormCtrl - angular 形式控制器 - 是 undefined!

<form name="signupFormCtrl" ng-submit="signup()" novalidate>

编辑 2:

这是我试过的：

 .state('signup', {
        abstract: true,
        views: {
            '@': {
                controller: 'SignupCtrl',
                templateUrl: 'signup/views/signup.html'
            }
        }
    })
    .state('signup.form', {
        url: '/signup',
        views: {
            '@signup': {
                templateUrl: 'signup/views/signup.form.html'
            }
        }
    })
    .state('signup.success', {
        url: '/signup/success',
        views: {
            '@signup': {
                templateUrl: 'signup/views/signup.success.html'
            }
        }
    })

Answer 1

无法从另一个范围访问来自一个范围的数据。尝试对要跨范围使用的数据使用 rootScope 在模板中使用 $root，如 {{$root.signupForm.member.email}}，在控制器中使用 $rootScope，如 $rootScope.signupForm.member.email

Answer 2

还有a working plunker

这对于 UI-Router 内置功能是可行的。我们需要为我们的基本状态引入控制器：

.state('signup', {
    abstract: true, 
    templateUrl: 'signup/views/signup.html',
    controller: 'SignupBaseCtrl',
})

在此控制器内部，我们将在 $scope:

中定义一个模型

.controller('SignupBaseCtrl', ['$scope', function ($scope) { 
  $scope.signupForm = { member : { email : null }};
}])

现在，如果我们使用这样的模型：

{{signupForm.member.email}}

在我们的任何子状态中，我们将访问相同的模型、相同的参考对象 singupForm。

这怎么可能？它是如何工作的？一切都在这里清楚地解释：

Scope Inheritance by View Hierarchy Only

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

您还可以查看：Controller from Parent Layout is not access by child views

UI 路由器和变量在从一种状态转换到另一种状态后不再位于 $scope 中的问题

Issue with UI router and variables no longer being in the $scope after transitioning from one to another state

angularjs

angularjs-scope

angular-ui-router

Scope Inheritance by View Hierarchy Only