AngularJS UI路由器未到达子控制器

一尘不染

AngularJS UI路由器未到达子控制器

angularjs

我有一个配置功能：

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内部。当我获得url like时/projects- ws/tasks，tasksCtrl函数按预期工作。但是，当我获得带有id的url时，即/projects- ws/tasks/32，我看不到任何输出，但是我希望innerViewCtrl输出，这就是我遇到的问题。我认为绝对/相对视图存在问题，但是我已经尝试了所有组合，但仍然无法正常工作。

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

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

            }
        }
    })

正如RadimKöhler所说。输出mainViewctrl Object {taskId: "32"}，但是$stateParams.taskId从innerView现在开始我该如何到达？

阅读 256

2020-07-04

共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": {

检查：

[视图名称-相对名称与绝对名称](https://github.com/angular-ui/ui-router/wiki/Multiple-

Named-Views#view-names—relative-vs-absolute-names)

小引用：

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

我在这里创建了一个工作示例，状态如下

$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 正在将<div ui- view="">一些带有两个命名锚点的模板注入到index.html（根）中：

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

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

检查它在这里的行动

2020-07-04