Question

您好我正在开发Angularjs应用程序。我是Angularjs的新手。我在UI状态嵌套方面遇到了一些问题。我的要求是开发忘记密码页面。流程如下。

ForGotPassword
  Step 1: MobileNumber
          DOB
          Submit->If successful then
 Step 2:  OTP
          Verify->If successful then
 Step 3:  New Password
          Confirm Password
          Submit.

对于上述三个步骤，我想在其中注入相应的页面

class="container">
            <div ui-view></div>
        </div>

这是我的主要控制者。

var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
   $stateProvider.state('ForgotPassword', {
        url: '/ForgotPassword',
        templateUrl: 'ForgotPassword/ForgotPassword.html',
        controller: 'ForgotPassword'
    });
});

这是我的忘记密码控制器。

(function () {
    angular.module('RoslpApp').controller('ForgotPassword', ['$rootScope', '$translatePartialLoader', '$translate', function ($rootScope, $translatePartialLoader, $translate) {
        $stateProvider
         .state('ResetPassword', {
             url: '/ResetPassword',
             templateUrl: 'ForgotPassword/ResetPassword.html',
             controller: 'ResetPassword'
         });
        $stateProvider
        .state('OTPVerification', {
            url: '/OTPVerification',
            templateUrl: 'ForgotPassword/OTPVerification.html',
            controller: 'OTPVerification'
        });
        $stateProvider
       .state('ChangePassword', {
           url: '/ChangePassword',
           templateUrl: 'ForgotPassword/ChangePassword.html',
           controller: 'ChangePassword'
       });
    }]);
})();

Forgotpassword.html

<div class="container">
    <div ui-view></div>
</div>

我还有ResetPassword.html，OTPVerification.html，ChangePassword.html及相应的文本框。我不确定我做得对不对？我可以在这里得到一些帮助。任何帮助，将不胜感激。谢谢。

Answer 1

请参阅此处以使用angular ui router实现嵌套状态和视图：https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views。

(function () {
    angular.module('RoslpApp').controller('ForgotPassword', ['$rootScope', '$translatePartialLoader', '$translate', function ($rootScope, $translatePartialLoader, $translate) {
        $stateProvider
         .state('ForgotPassword.ResetPassword', {
             url: '/ResetPassword',
             templateUrl: 'ForgotPassword/ResetPassword.html',
             controller: 'ResetPassword'
         });
        $stateProvider
        .state('ForgotPassword.OTPVerification', {
            url: '/OTPVerification',
            templateUrl: 'ForgotPassword/OTPVerification.html',
            controller: 'OTPVerification'
        });
        $stateProvider
       .state('ForgotPassword.ChangePassword', {
           url: '/ChangePassword',
           templateUrl: 'ForgotPassword/ChangePassword.html',
           controller: 'ChangePassword'
       });
    }]);
})();

如何在angularjs中嵌套状态？

1 个答案: