Question

我已经看过类似的问题，但他们的问题似乎解决了父HTML中缺少<ui-view />标记的问题。在这里，情况并非如此。

我有一个无法加载的子状态：

routes.js

angular.module('myapp').config(function($stateProvider, $locationProvider, $urlRouterProvider){

$urlRouterProvider.otherwise('/');

//A bunch of unrelated routes

$stateProvider.state({
        'name': 'users',
        'url': '/users',
        'controller': 'usersCtrl',
        'templateUrl': '/scripts/pages/users/users.html'
    });

$stateProvider.state({
    'name': 'users.editeduser',
    'url': '/editeduser',
    'template': '<h1>HELLO</h1>'
    // 'templateUrl': '/scripts/pages/users/parts/editedUser.html',
    // 'controller': 'editedUserCtrl'
    // 'resolve':  {
    //     editedUserId: function(editedUserId) {
    //         return editedUserId;
    //     }
    // }
});

users.html

<div class="panel panel-default">
    <div class="panel-heading">
        <h3>Users List</h3>
    </div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="user in users track by $index">{{user.firstname + " " + user.lastname}}</li>
        </ul>
        <ui-view name="users.editeduser"></ui-view>
    </div>
    <div class="panel-footer">
        <button class="btn btn-primary" ui-sref="user-edit">New User</button>
    </div>
</div>

在html代码uiview行中，我尝试使用<ui-view name=".editeduser"></ui-view>，我也尝试了<ui-view name="editeduser"></ui-view>无效。我甚至试过<div ui-view=...。

正如你在注释掉的routes.js代码中看到的那样，孩子应该拥有一个假设的控制器和html模板，但我为了试图找出问题而删除了它们。

在Chrome开发者工具中，这是输出：

任何帮助将不胜感激。感谢

Answer 1

该按钮的ui-sref与该状态的网址不匹配：

<div class="panel-footer">
    <!-- ERRONEOUS 
    <button class="btn btn-primary" ui-sref="user-edit">New User</button>
    -->
    <!-- INSTEAD -->
    <button class="btn btn-primary" ui-sref="users/editeduser">New User</button>
</div>

我认为你是在做某事，因为我无论在哪里都可以在我的代码中调用子状态，而且我认为我需要调用它来加载它，但我不知道如何操作。我将尝试查看文档并查看 -

UI-Router for AngularJS (1.x) - Hello Galaxy! Tutorial有一个DEMO，显示一个包含人员列表的州。只有在选择此人时，才会显示包含个人信息的子视图。

DEMO on PLNKR

UI-Router子/嵌套状态未加载

1 个答案: