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

В моем угловом приложении, я создал пользовательскую директиву для navbar, который контроллер принимает в $stateParams для доступа к переменному с именем lang, а так:

.config(function($stateProvider, $urlRouterProvider, LANG) { 

    $urlRouterProvider 
     .otherwise('/' + LANG['EN'].shortName); 

    $stateProvider 
     .state('proverb-list', { 
      url: '/:lang', 
      templateUrl: 'components/proverb-list/proverb-list.html', 
      controller: 'ProverbListCtrl as vm' 
     }) 
     .state('proverb-single', { 
      url: '/:lang/:proverbId', 
      templateUrl: 'components/proverb-single/proverb-single.html', 
      controller: 'ProverbCtrl as vm' 
     }); 
});

Когда я получаю доступ к состоянию proverb-list, контроллер с именем ProverbListCtrl действительно видит $stateParams.lang, но моя директива navbar не может. Когда я console.log($stateParams) все, что я получаю, это пустой объект.

Это Navbar находится вне моего ui-view:

<navbar proverbial-navbar></navbar> 

<div ui-view></div> 

<footer proverbial-footer></footer>

Это проблема? Как я могу получить доступ к фактическим $ stateParams внутри моей директивы?

EDIT: код директивы ниже, как и спросил:

(function() { 
    'use strict'; 

    angular 
     .module('proverbial') 
     .directive('proverbialNavbar', directive); 

    function directive() { 
     var directive = { 
      restrict: 'EA', 
      templateUrl: 'components/shared/navbar/navbar.html', 
      scope: { 
      }, 
      link: linkFunc, 
      controller: Controller, 
      controllerAs: 'vm', 
      bindToController: true 
     }; 

     return directive; 

     function linkFunc(scope, el, attr, ctrl) { 

     } 
    } 

    Controller.$inject = ['LANG', 'ProverbFactory', '$stateParams']; 

    function Controller(LANG, ProverbFactory, $stateParams) { 
     var vm = this; 

     vm.languages = LANG; 
     console.log($stateParams); 
     vm.currentLang = LANG[$stateParams.lang.toUpperCase()]; 

     activate(); 

     function activate() { 
      vm.alphabet = ProverbFactory.getAlphabet(); 
     } 
    } 
})();

источник

2015-12-20 Tiago

Просьба передать параметры состояния как значение с директивой '='. Таким образом, вы можете получить доступ к моделям видимости в директиве. Возможно, вы хотите назначить $ stateParams модели, прежде чем передавать ее директиве. Помните, что в этих случаях вам может понадобиться область вмешательства/теневого доминирования для детей, даже если у вас есть изолированная область действия для директивы. Так что создайте суперконтроллер для всех этих. Ui-router позволяет вам указать несколько видов, возможно, вы можете использовать это – Gary

Да, навигационная панель, находящаяся за пределами пользовательского интерфейса, вероятно, проблема. Думаю об этом. Навигатор будет создан один раз, прежде чем вы войдете в состояние. Поэтому, когда код navbar работает, он еще не ввел состояние. Покажите свой код для подтверждения. –

Вы не должны получить доступ к $stateParams в этой директиве, когда она не зависит от государства. Поскольку ваш навигатор находится за пределами ui-view, его контроллер можно вызвать до того, как ui-router инициализировал $stateParams состояния, которое вас интересует. Помните, что ваш навигационный контроллер вызывается только один раз, когда navbar инициализируется, а не каждый раз, когда состояние изменения.

Альтернатива: Что вы можете сделать, это превратить ваше поле currentLang в функцию. Функция может извлечь значение из $stateParams при необходимости:

vm.currentLang = function() { return LANG[$stateParams.lang.toUpperCase()] };

Убедитесь, что вы измените currentLang на currentLang() везде в вашем шаблоне.

источник

2015-12-20 17:01:59 lex82

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

ответ

Смежные вопросы