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 /projects-ws/tasks
, tasksCtrl
функция работает как положено. Но когда у меня есть 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);
}
}
}
})
как сказал Радим Келер. Выводит mainViewctrl Object {taskId: "32"}
, но как я могу достичь $stateParams.taskId
от innerView
сейчас?
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 - это имя, используемое в директиве view, а name - абсолютное имя штата, например, 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
вводит в index.html (root) <div ui-view="">
некоторый шаблон с двумя именованными якорями:
template: '<div ui-view="mainView" ></div>' +
'<div ui-view="innerView" ></div>',
затем они используются в списках и состояниях деталей с относительными или абсолютными именами
Проверьте это здесь в действии