无法从状态“家”解决“___” - 角度 ui-router 问题答案

【问题标题】：Could not resolve '___' from state 'home' - angular ui-router issue无法从状态“家”解决“___” - 角度 ui-router 问题
【发布时间】：2015-05-12 14:52:40
【问题描述】：

我是 Angular 新手并遵循本教程：

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

但我将此模块注入到另一个现有模块中。

但是，我不断收到“无法解决状态”错误 - 我不知道为什么，但怀疑它要么是路由问题而且我很笨，要么是嵌套视图问题（注意嵌套 ui-在 index.html 中查看，然后在 home.html 中再次查看）。

使用 angular 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('/');
})

form-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!');
    };

}]);

【问题讨论】：

你弄错了州名。对于子视图，请相应地设置州名。 plnkr.co/edit/08XPp8?p=preview

标签： angularjs node.js express angularjs-directive angular-ui-router

【解决方案1】：

您的代码没有完全按照教程进行。请注意，要使子状态发挥作用，它们必须引用其父状态。

在教程代码中：

.state('form.profile', {

在您的代码中：

 .state('.profile', {

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

.state('home.profile', {

【讨论】：