javascript - Angularjs ui-router 未到达子 Controller

Question

我有一个配置函数:

function config($stateProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
    .state('projectsWs.tasks', {
        url: "/tasks",
        views: {
            "mainView": {
                templateUrl: "/app/projects/templates/index.php"
            },
            "innerView": {
                templateUrl: "/app/projects/templates/tasks.php",
                controller: tasksCtrl,
                controllerAs:'tasks'
            }
        }
    })
    .state('projectsWs.tasks.detail', {
        url: "/:taskId",
        views: {
            "mainView@": {
                templateUrl: "/app/projects/templates/index.php"
            },
            "innerView@mainView": {
                templateUrl: "/app/projects/templates/tasks.php",
                controller: function($stateParams) {
                    console.log('innerViewCtrl', $stateParams);
                }
            }
        }
    });}    

InnerView 位于 mainView 内部。 当我得到像 /projects-ws/tasks 这样的 url 时，tasksCtrl 函数按预期工作。但是当我得到带有 id 的 url 时，即 /projects-ws/tasks/32，我看不到任何输出，但我期望 innerViewCtrl 输出，那就是我遇到的问题。我认为我在绝对/相对 View 方面遇到了问题，但我已经尝试了所有组合，但仍然不起作用。

更新: 所以现在我有以下状态:

state('projectsWs.tasks.detail', {
        url: "/:taskId",
        views: {
            "mainView@": {
                templateUrl: "/app/projects/templates/index.php",
                controller: function($stateParams) {
                    console.log('mainViewctrl', $stateParams);
                }
            },
            "innerView": {
                templateUrl: "/app/projects/templates/tasks.php",
                controller: function($stateParams) {
                    console.log('innerViewctrl', $stateParams);
                }

            }
        }
    })

正如 Radim Köhler 所说。它输出 mainViewctrl 对象 {taskId: "32"}，但现在如何从 innerView 访问 $stateParams.taskId ？

Answer 1

UI-Router 的绝对命名与您使用它时的工作方式略有不同

.state('projectsWs.tasks.detail', {
    url: "/:taskId",
    views: {
        "mainView@": {
            templateUrl: "/app/projects/templates/index.php"
        },
        // this won't work, because the part after @
        // must be state name
        "innerView@mainView": {

        // so we would need this to target root, index.html
        "innerView@": {

        // or this to target nested view inside of a parent
        "innerView": {

        // which is the same as this
        "innerView@projectsWs.tasks": {

检查:

View Names - Relative vs. Absolute Names

小引用:

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

我创建了一个working example here ，各州都是这样的

$stateProvider
.state('projectsWs', {
  template: '<div ui-view="mainView" ></div>' +
   '<div ui-view="innerView" ></div>',
})
$stateProvider
.state('projectsWs.tasks', {
    url: "/tasks",
    views: {
        "mainView": {
            //templateUrl: "/app/projects/templates/index.php"
            template: "<div>main view tasks </div>",
        },
        "innerView": { 
            //templateUrl: "/app/projects/templates/tasks.php",
            template: "<div>inner view tasks </div>",
        }
    }
})
.state('projectsWs.tasks.detail', {
    url: "/:taskId",
    views: {
        "mainView@projectsWs": {
            //templateUrl: "/app/projects/templates/index.php"
            template: "<div>main view task {{$stateParams | json }} </div>",
        },
        "innerView@projectsWs": {
            //templateUrl: "/app/projects/templates/tasks.php",
            template: "<div>inner view task {{$stateParams | json }} </div>",
        }
    }
});  

我们可以看到，祖 parent projectsWs 正在注入(inject)index.html (root) <div ui-view="">一些模板，带有两个命名 anchor :

template: '<div ui-view="mainView" ></div>' +
          '<div ui-view="innerView" ></div>',

然后将其用于列表和详细信息状态，并具有相对和绝对名称

检查一下here行动中