Угловые движения неожиданно тег заголовка внутри тела

Я пытаюсь сделать одностраничное приложение с помощью Angular, и я хочу динамически изменять названия страниц на основе представлений. Я пытался делать это с помощью директив, как показано в следующем коде:Угловые движения неожиданно тег заголовка внутри тела

<!-- index.html !--> 

<html ng-app="MyApp"> 
<head> 
    <page-title></page-title>   <!-- ....................LINE 1 !--> 
    <script type="text/javascript" 
     src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"> 
    </script> 
    <script type="text/javascript" 
     src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.js"> 
    </script> 
    <script type="text/javascript" 
     src="/js/index.js"> 
    </script> 
</head> 

<body> 
     <nav-bar></nav-bar> 
     <div ng-view></div> 
     ...

Ниже моя директива код:

app.directive('pageTitle', function() { 
    return { 
     controller: 'titleController', 
     template: '<title>{{ page.title }}</title>' //.............LINE 2 
    } 
});

Названия меняются, как и ожидалось. Все работает отлично, за исключением того факта, что любой код, который должен находиться внутри тега <head>, теперь перемещается внутри тела, включая теги заголовка, стиля и сценария. Это плохо для SEO. Я искал проблему и нашел некоторые альтернативные решения, чтобы сделать то же самое по ссылке this, но не точное решение и объяснение этой аномалии. Я даже попытался изменить ЛИНИЯ 1 и LINE 2 следующим образом:

<title><page-title></page-title></title> << LINE 1 

template: '{{ page.title }}'    << LINE 2

И это становится еще более неожиданным. Он вообще не изменяет заголовок и вместо этого выводит <page-title></page-title> прямо на заголовок каждой страницы, как если бы не была определена директива для тега <page-title>. Мне нужно объяснить некоторые из этих аномалий в Угловом. :(

источник

2016-12-07 Utkarsh

Как вы определяете свой '$ scope.page.title'? Не могли бы вы добавить код контроллера? –

Не уверен, как определить заголовок страницы, но вы могли бы сделать что-то вдоль этих линий и определить заголовок страницы в stateProvider

app.config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 
     .state('home', { 
     url: '/home', 
     templateUrl: 'home.html', 
     data: { 
      pageTitle: 'Home' 
     } 
     }) 
     .state('about', { 
     url: '/about', 
     templateUrl: 'about.html', 
     data: { 
      pageTitle: 'About' 
     } 
     }) 
     .state('credits', { 
     url: '/credits', 
     templateUrl: 'credits.html', 
     data: { 
      pageTitle: 'Credits' 
     } 
     }); 
    } 
]);

Как для директивы

app.directive('pageTitle', ['$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); 
     } 
    }; 
    } 
]);

Затем вашу страницу title tags <title page-title></title>

element.text с данным текстом будет сортировать его как простое определение нового тега с шаблоном.

источник

2016-12-07 22:27:34

Здравствуйте, Bangsi. Спасибо за ответ, но я использую ng-Route. Не ng-UI-маршрутизатор. :( – Utkarsh

Угловые движения неожиданно тег заголовка внутри тела

ответ

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