Angularjs ui-router 没有到达子控制器 [英] Angularjs ui-router not reaching child controller

问题描述

我有一个配置函数:

function config($stateProvider,$locationProvider) {$locationProvider.html5Mode(true);$stateProvider.state('projectsWs.tasks', {网址:/任务"，意见:{主视图":{templateUrl: "/app/projects/templates/index.php"},内部视图":{templateUrl: "/app/projects/templates/tasks.php",控制器:tasksCtrl，controllerAs:'任务'}}}).state('projectsWs.tasks.detail', {url: "/:taskId",意见:{主视图@":{templateUrl: "/app/projects/templates/index.php"},内部视图@mainView":{templateUrl: "/app/projects/templates/tasks.php",控制器:函数($stateParams){console.log('innerViewCtrl', $stateParams);}}}});}

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

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

state('projectsWs.tasks.detail', {url: "/:taskId",意见:{主视图@":{templateUrl: "/app/projects/templates/index.php",控制器:函数($stateParams){console.log('mainViewctrl', $stateParams);}},内部视图":{templateUrl: "/app/projects/templates/tasks.php",控制器:函数($stateParams){console.log('innerViewctrl', $stateParams);}}}})

正如拉迪姆·科勒所说.它输出 mainViewctrl Object {taskId: "32"}，但是我现在如何从 innerView 到达 $stateParams.taskId ?

解决方案

使用 UI-Router 进行绝对命名的工作方式与您之前使用的有所不同

.state('projectsWs.tasks.detail', {url: "/:taskId",意见:{主视图@":{templateUrl: "/app/projects/templates/index.php"},//这行不通，因为@之后的部分//必须是状态名内部视图@mainView":{//所以我们需要它来定位 root, index.html内部视图@":{//或者 this 以父级内的嵌套视图为目标内部视图":{//与此相同[e-mail]":{

检查:

查看名称 - 相对名称与绝对名称

小引用:

<块引用>

在幕后，每个视图都被分配一个绝对名称，遵循 viewname@statename 方案，其中 viewname 是视图指令和状态名称中使用的名称是状态的绝对名称，例如联系方式.您还可以选择以绝对语法编写视图名称.

我创建了一个工作示例，状态是这样的

$stateProvider.state('projectsWs', {模板:'<div ui-view="mainView" ></div>'+'<div ui-view="innerView" ></div>',})$stateProvider.state('projectsWs.tasks', {网址:/任务"，意见:{主视图":{//templateUrl: "/app/projects/templates/index.php"模板:
主视图任务
"，},内部视图":{//templateUrl: "/app/projects/templates/tasks.php",模板:
内部视图任务
"，}}}).state('projectsWs.tasks.detail', {url: "/:taskId",意见:{mainView@projectsWs":{//templateUrl: "/app/projects/templates/index.php"template: "
 主视图任务 {{$stateParams | json }} </div>",},innerView@projectsWs":{//templateUrl: "/app/projects/templates/tasks.php",模板:<div>内部视图任务{{$stateParams | json }} </div>",}}});

我们可以看到，祖父 projectsWs 正在注入 index.html(根)<div ui-view=""> 一些模板，有两个命名的锚点:

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

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

在此处查看操作

I've got a config function:

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 is inside mainView. When I've got url like /projects-ws/tasks, tasksCtrl function works as expected. But when I've got url with an id, i.e. /projects-ws/tasks/32, I don't see any output, but I expect innerViewCtrl output, that's the problem I got. I think I've got a problem with absolute/relative views, but I've allready tried all combinations and it still don't work.

UPDATE: So now I've got following state:

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);
                }

            }
        }
    })

as Radim Köhler said. It outputs mainViewctrl Object {taskId: "32"}, but how can I reach $stateParams.taskId from innerView now?

解决方案

Absolute naming with UI-Router works a bit differntly then you've used it

.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
        "[e-mail]": {

Check the:

View Names - Relative vs. Absolute Names

small cite:

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.

I created a working example here, and the states are like this

$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>",
        }
    }
});  

What we can see is, that the grand parent projectsWs is injecting into index.html (root) <div ui-view=""> some template, with two named anchors:

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

this are then used in list and detail states, with relative resp absolute names

Check it here in action

这篇关于Angularjs ui-router 没有到达子控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！