Angularjs ui-router没有到达子控制器

2022-01-21 00:00:00 angularjs javascript angular-ui-router

我有一个配置函数:

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 输出，那就是我遇到的问题.我认为我在使用绝对/相对视图时遇到了问题，但我已经尝试了所有组合，但仍然无法正常工作.

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

            }
        }
    })

正如 Radim Köhler 所说.它输出 mainViewctrl Object {taskId: "32"}，但我现在如何从 innerView 到达 $stateParams.taskId?

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

推荐答案

使用 UI-Router 的绝对命名与你使用它的方式有点不同

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
        "innerView@projectsWs.tasks": {

检查:

小引用:

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

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

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

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

在这里查看它

相关文章