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>',

затем они используются в списках и состояниях деталей с относительными или абсолютными именами

Проверьте это здесь в действии

Другие вопросы по тегам