Sayfa Başlığı kullanarak UI-Router

SORU

22 Mayıs 2014, PERŞEMBE

Sayfa Başlığı kullanarak UI-Router

Benim AngularJS uygulama bazlı yönlendirme dahili yerine uı-router kullanmak için hicret ediyorum. Aşağıda gösterildiği gibi yapılandırılmış

.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
    .state('home', {
        url: '/home',
        templateUrl : 'views/home.html',
        data : { pageTitle: 'Home' }

    })
    .state('about', {
        url: '/about',
        templateUrl : 'views/about.html',
        data : { pageTitle: 'About' }
    })
     });

Nasıl pageTitle değişken kullanımı dinamik olarak sayfanın Başlığı ayarlayabilirim? Yönlendirme yerleşik kullanarak, yapabilirim

$rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){
    $rootScope.pageTitle = $route.current.data.pageTitle;
  });

ve sonra aşağıda gösterildiği gibi HTML içinde değişken bağlama

<title ng-bind="$root.pageTitle"></title>

Uı-router kullanarak yapabileceğim benzer bir olay var mı? Olduğunu fark ettim: 'onExit ama her duruma bağlı gibi görünüyor ve benim kod her devlet için $rootScope değişkeni ayarlamak için tekrar gerektirir' fonksiyonları. onEnter

CEVAP

22 Mayıs 2014, PERŞEMBE

$stateChangeSuccess kullanın.

Bir yönerge koyabilirsiniz:

app.directive('updateTitle', ['$rootScope', '$timeout',
  function($rootScope, $timeout) {
    return {
      link: function(scope, element) {

        var listener = function(event, toState) {

          var title = 'Default Title';
          if (toState.data && toState.data.pageTitle) title = toState.data.pageTitle;

          $timeout(function() {
            element.text(title);
          }, 0, false);
        };

        $rootScope.$on('$stateChangeSuccess', listener);
      }
    };
  }
]);

Ve:

<title update-title></title>

Demo:http://run.plnkr.co/8tqvzlCw62Tl7t4j/#/home

Kod:http://plnkr.co/edit/XO6RyBPURQFPodoFdYgX?p=preview

$stateChangeSuccess $timeout ile bile tarihin en az kendim test ettim doğru olması için gerekli olmuştur.

Düzenleme: Kasım 24, 2014 - Bildirge yaklaşım:

app.directive('title', ['$rootScope', '$timeout',
  function($rootScope, $timeout) {
    return {
      link: function() {

        var listener = function(event, toState) {

          $timeout(function() {
            $rootScope.title = (toState.data && toState.data.pageTitle) 
            ? toState.data.pageTitle 
            : 'Default title';
          });
        };

        $rootScope.$on('$stateChangeSuccess', listener);
      }
    };
  }
]);

Ve: