javascript – Angularjs 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中.
当我有/ project-ws / tasks之类的url时,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”},但是如何从innerView到达$stateParams.taskId呢？

解决方法:

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

我们可以看到,祖父项目Ws正在注入index.html(root)< div ui-view =“”>一些模板,有两个命名锚点：

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

然后将其用于列表和详细信息状态,以及相对resp绝对名称

检查它here在行动

标签：javascript,angularjs,angular-ui-router
来源： https://codeday.me/bug/20190917/1809554.html