Question

我是角色新手并且遵循本教程：

https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router

但我正在将此模块注入另一个现有模块。

然而，我一直得到一个“无法解决状态”的错误 - 我不确定为什么但是怀疑它是路由问题而我是愚蠢的，否则它是一个嵌套的视图问题（注意ui的嵌套在index.html中查看，再在home.html中查看）。

使用角度ui版本0.2.13 角度版本1.3.14

请帮助!!

以下是相关代码：

结构：

home.html的

                 <div id="form-container">

                    <div class="page-header text-center">
                        <h2>Let's Be Friends</h2>

                        <!-- the links to our nested states using relative paths -->
                        <!-- add the active class if the state matches our ui-sref -->
                        <div id="status-buttons" class="text-center">
                            <a ui-sref-active="active" ui-sref=".profile"><span>1</span> Profile</a>
                            <a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a>
                            <a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
                        </div>
                    </div>

                    <!-- use ng-submit to catch the form submission and use our Angular function -->
                    <form id="signup-form" ng-submit="processForm()">

                        <!-- our nested state views will be injected here -->
                        <div id="form-views" ui-view></div>
                    </form>

                </div>

                <!-- show our formData as it is being typed -->
                <pre>
                    {{ formData }}

                </pre>

的index.html

<body> blah blah
<div ui-view></div>
<script src="app.js"></script>
<script src="javascripts/form.js"></script>
<script src="controllers/main.js"></script>
<script src="controllers/form-controller.js"></script>
</body

app.js

angular.module('MyApp', ['ngCookies','ngResource', 'ngMessages', 'mgcrea.ngStrap', 'formApp'])
.config(['$locationProvider', '$stateProvider',  function($locationProvider, $stateProvider){

$locationProvider.html5Mode(true);

console.log($stateProvider);
}]);

form.js

angular.module('formApp', ['ngAnimate', 'ui.router'])

// configuring our routes 
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

        // route to show our basic form (/form)
        .state('home', {
            url: '/',
            templateUrl: 'views/home.html',
            controller: 'formController'
        })
        // nested states 
        // each of these sections will have their own view
        // url will be nested (/form/profile)
       .state('.profile', {
            url: '/profile',
            templateUrl: 'views/form-profile.html'
        })

        // url will be /form/interests
        .state('.interests', {
            url: '/interests',
            templateUrl: 'views/form-interests.html'
        })

        // url will be /form/payment
        .state('.payment', {
            url: '/payment',
            templateUrl: 'views/form-payment.html'
        });

    // catch all route
    // send users to the form page 
    $urlRouterProvider.otherwise('/');
})

形状controller.js

// our controller for the form
// =============================================================================
angular.module('formApp')
.controller('formController', ['$scope', function($scope) {

    // we will store all of our form data in this object
    $scope.formData = {};

    // function to process the form
    $scope.processForm = function() {
        alert('awesome!');
    };

}]);

Answer 1

您的代码并未完全遵循本教程。请注意，要使子状态运行，它们必须引用其父状态。

在教程代码中：

.state('form.profile', {

在您的代码中：

 .state('.profile', {

如果您更改子状态以引用父级，则它们将正常运行。即。

.state('home.profile', {

无法解决＆＃39; ___＆＃39;来自州＆＃39; home＆＃39; - 角度ui-router问题

1 个答案: