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

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輸出，這就是我遇到的問題。 我認為絕對/相對視圖存在問題，但是我已經嘗試了所有組合，但仍然無法正常工作。

更新：所以現在我有以下狀態：

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 ？

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

檢查：

視圖名稱-相對名稱與絕對名稱

小引用：

在幕后，每個視圖都被分配一個遵循viewname@statename方案的絕對名稱，其中viewname是視圖指令中使用的名稱，狀態名稱是該州的絕對名稱，例如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 Projects正在注入index.html（根） <div ui-view="">一些模板，帶有兩個命名錨點：

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

然后將其用於列表和詳細信息狀態，並帶有相對的絕對名稱

在這里檢查