Question

我正在使用Angular和ui-router。我无法启动嵌套控制器，但如果状态未嵌套，控制器将启动。

URL是从DnaNodeListCtrl模板生成的。该模板生成的内容看起来像是正确的URL： http://localhost:8080/#/v1/dnanodes/a9bfd497-ce6b-4832-909e-506a9b29e46e

我的代码如下。为什么我不能启动嵌套控制器？

config.js：

var dnaMgrApp = angular.module('dnaMgrApp', [
     'ngRoute',
     'ui.router',
     'dnaMgrControllers',
     'dnaMgrRestService'
]);


dnaMgrApp.config(function($stateProvider, $urlRouterProvider) {
    //
    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/");
    //
    // Now set up the states
    $stateProvider
        .state('nodeList', {
            url: "/",
            templateUrl: 'templates/dnaNodeList.html',
            controller: 'DnaNodeListCtrl'
        })
        .state('nodeList.nodeDetail', {
            url: "v1/dnanodes/:nodeId",
            templateUrl: 'templates/dnaNodeSummary.html',
            controller: function($scope){
                $scope.title = 'My DNA';}
        });
});

模板：

<div id="body-container" >
    </div><div id="tablediv">
        <div  ng-repeat="node in dnaNodes">
            <div class="dnanode">
                <a ui-sref="nodeList.nodeDetail({nodeId:node.id})">
                    <table>
                        <tr><td>{{node.geneName}}</td><td><img src="{{node.statusIcon}}"></td></tr>
                        <tr><td colspan="2">2 DNA Pathways</td></tr>
                    </table>
                </a>
            </div>
            <br>
        </div>
    </div>
</div>

Answer 1

Ui路由器的工作原理是嵌套状态需要与父状态+你在嵌套状态中定义的内容相同的url。

如：

如果您的州长为url：/foo

然后定义一个嵌入了url的状态：/bar

然后你必须触发嵌套状态的结果url是：

/foo/bar

因此，您需要在子URL中添加/。

编辑只需使用：

 .state('nodeList.nodeDetail', {
     url: "/v1/dnanodes/:nodeId",
     templateUrl: 'templates/dnaNodeSummary.html',
     //....
 });

Answer 2

父模板需要有一个呈现子视图的位置。具体而言，父模板至少需要<ui-view/>。这在Nested States and Nested Views指南中进行了解释。

Angular UI Router：嵌套状态不启动控制器

2 个答案: