Угловой UI-маршрутизатор: государственный контролера ребенок не вызывался

Question

В моем угловом приложении, у меня есть следующая структура маршрута:

.state('mapping', { 
    url: '/mapping', 
    templateUrl: 'app/components/mapping/mapping.html', 
    controller: 'MapCtrl as map', 
    abstract: true, 
    authenticate: true 
}) 
.state('mapping.all', { 
    url: '', 
    templateUrl: 'app/components/mapping/partials/all.html', 
    authenticate: true 
}) 
.state('mapping.project', { 
    url: '/:projectName', 
    templateUrl: 'app/components/mapping/partials/project.html', 
    controller: 'ProjectCtrl as proj', 
    authenticate: true 
}) 

При доступе к mapping состояния, mapping.all нагрузка по умолчанию. Это в основном показывает список проектов, которые ссылаются на состояние mapping.project, как таковой:

<a ui-sref="mapping.project({projectId: project.id, projectName: project.name})">...</a> 

Я хочу, чтобы вызвать ProjectCtrl когда доступ mapping.project для того, чтобы загрузить необходимые данные, но он даже не загружается , В этом фрагменте, ниже которого включает в себя только соответствующие данные, то alert сообщение никогда не выскочит:

angular 
    .module('watera') 
    .controller('ProjectCtrl', Controller); 

Controller.$inject = ['$stateParams', 'UserFactory', 'ProjectFactory']; 

function Controller($stateParams, UserFactory, ProjectFactory) { 
    var proj = this; 

    activate(); 

    function activate() { 
     alert('1'); 
    } 
} 

Файл JS правильно связан и контроллер назван правильно. <div ui-view></div> элемент расположен внутри mapping.html, как показано ниже:

<div id="ribbon" class="no-print"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <strong>Mapping</strong> 
       <p class="text-muted">In this section...</p> 
      </div> 
     </div> 
    </div> 
</div> 

<div ui-view></div> 

Почему этот контроллер не загружается?

EDIT: Он получает страннее, я переключил структуру:

.state('mapping', { 
    url: '/mapping', 
    templateUrl: 'app/components/mapping/mapping.html', 
    abstract: true, 
    authenticate: true 
}) 
.state('mapping.all', { 
    url: '', 
    templateUrl: 'app/components/mapping/partials/all.html', 
    controller: 'MapCtrl as map', 
    authenticate: true 
}) 
.state('mapping.project', { 
    url: '/:projectName', 
    templateUrl: 'app/components/mapping/partials/project.html', 
    controller: 'ProjectCtrl as proj', 
    authenticate: true 
}) 

MapCtrl И пока продолжает работать правильно, ProjectCtrl до сих пор нет.

Answer 1

Найдено вопрос ... Были два экземпляра ProjectCtrl в этом проекте:

Видимо , это вызывает какой-то тихий конфликт, потому что ошибки консоли не было абсолютно. Поскольку второй экземпляр также был связан на index.html, после тот, который я хотел загрузить, вероятно, это просто замена правильной версии. Отладка кошмаров.

Исправлено.

Answer 2

Абстрактное состояние не может существовать по определению, поэтому с URL-адресом шаблона для родителя и детей (который не будет наследовать шаблон-родительский родительский элемент, потому что дети определяют их собственные) является весьма сомнительной ИМО.

Им также интересно, если есть проблемы distinguising между ... URL: '' И URL: '/: Projectname'

(Хотя он должен обрабатывать различия). Однако, чтобы убедиться, что я предлагаю пошаговый подход. Стартует с последующим отображением я предлагаю, а затем усилить его оттуда ...

.state('mapping', { 
    abstract: true, 
    authenticate: true 
}) 
.state('mapping.all', { 
    url: '/', 
    templateUrl: 'app/components/mapping/partials/all.html', 
    controller: 'MapCtrl as map', 
}) 
.state('mapping.project', { 
    url: '/project/:projectName', 
    templateUrl: 'app/components/mapping/partials/project.html', 
    controller: 'ProjectCtrl as proj', 
})