incapable de mettre à jour le titre angulaire 1 application sur le changement d'itinéraire

Question

La directive suivante fournit la valeur de la route actuelle

(function() { 
    var titleDirective=angular.module('titleDirective',[]); 
    titleDirective.directive('testTitle',function ($rootScope, $timeout) { 
     return { 
      restrict: 'E', 
      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); 
      } 
     }; 
    }) 
})(); 

et i ont définir les voies comme indiqué ci-dessous

.state('admin.signIn', { 
      url: '/signIn', 
      templateUrl: 'credentials/signIn.html', 
      controller: 'loginCtrl', 
      data : { pageTitle: 'Home' } 
     }) 

lorsque je tente pour utiliser la directive comme indiqué ci-dessous dans index.html

<test-title>{{title}}</test-title> 

mais vous ne savez pas comment mettre à jour le val ue dans la balise titre html sur le changement de la route

<title>Retailer Application</title> 

ne sais pas comment utiliser le {{title}} se comporter comme le titre

S'il vous plaît suggérer une façon de le faire

Answer 1

Mise à jour votre directive:

myApp.directive('testTitle', function($rootScope, $timeout) { 
    return { 
    restrict: 'E', 
    template: `<title>{{$root.title}}</title>`, 
    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); 
    } 
    }; 
}); 

ici comme vous utilisez rootScope de $ pour la variable de titre dans le modèle que vous avez à utiliser {{$root.title}}. Après cela, il suffit d'ajouter test-title directive dans la section tête de index.html

Working Plunker

Assurez-vous également que vous utilisez la version 0.4.2 de ui-routeur. Avec la version récente (1.x) de ui-router, l'événement $ stateChangeSuccess est obsolète. Utilisez $transitions.onSuccess à la place.

Official Documentation & issue