не может получить доступ к $ state или $ state.current - PullRequest
Новая
       13

не может получить доступ к $ state или $ state.current

0 голосов
/ 28 сентября 2018

Я хочу установить заголовки страниц, которые меняются в зависимости от маршрута.Я имею в виду Отзывчивые заголовки.

У меня есть директива в моем модуле: 

mainModule.directive("pageTitle", function($state){
return {
    restrict: 'A',
    template: "{{title}}",
    scope: {title: '=title'},
    link: function (scope, elem, attr) {
        scope.title=$state.current.data.title; //wrap this in $watch
        console.log('page state',$state.current.data.title);
    }
  } 
})

в моем main.cshtml У меня есть эта директива заголовка в заголовочных тегах: 

<title><page-title title="{{$state.current.data.title}}"></page-title></title>

И в моем конфигурационном файле есть stateProvider: 

$stateProvider
        .state('a-management', {
            name: 'aManState',
            url: '/a-management',
            template: '<div license-a permissions = permissions></div>',
            data: {title: 'A Management'}
        })
        .state('b-management/bs', {
            url: '/b-management/bs',
            template: '<b-management current-user = currentUser permissions = permissions></b-management>',
            data: {title: 'B Management'}
        })

И я тоже использовал ui-sref-active="active".Все выглядит хорошо, но когда я запускаю сайт, это не работает.Я открываю консоль и смотрю, что у меня есть, похоже, что она может достигать $ state (службой состояний), но ее свойство current пусто.

Почему можномой код не достигает текущего, поэтому current.data тоже?Я что-то пропустил?

Ответы [ 3 ]

0 голосов
/ 28 сентября 2018

В новейшей версии UI-Router вы можете использовать Переходные крючки ( документы здесь ) для достижения этого результата:

Вы можетенапишите свой page-title.directive.js как: 

mainModule.directive("pageTitle", function(){
return {
    restrict: 'A',
    template: "{{title}}",
    scope: {},
    controller: function ($scope, $transitions) {
        $transitions.onSuccess({}, function (transition) {
            //
            $scope.title = transition.to().title; // Your current state's title
        });
    }
  } 
})

И ваше определение состояния будет: 

$stateProvider.state('myState', {
    url: '/',
    title: 'My State Title',
    ...
})

Всегда старайтесь избегать доступа (или передачи на) $ rootScope если это не последний шанс для достижения результата.

Надеюсь, это поможет.

0 голосов
/ 01 октября 2018

Спасибо за помощь, ребята, в этом вопросе cwbutler решил эту проблему.

[ Установить заголовок страницы с помощью UI-Router

0 голосов
/ 28 сентября 2018

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

app.js 

// Insert code here 
app.run(function ($rootScope) {
    $rootScope.$on('$stateChangeSuccess', function (event, toState) {
        $rootScope.title = toState.title || 'Default Title';
});


// Insert code here
.state('', {
    url: '/',
    title: 'Random Title'
}

index.html 

    <head>
    <title ng-bind="title">Default Title</title>
    </head>

Надеюсь, это имеет смысл и поможет вам?

...