角度が予想外に本体内のタイトルタグ

角度を使用して単一ページアプリケーションを作成しようとしており、ビューに基づいてページタイトルを動的に変更したいとします。角度が予想外に本体内のタイトルタグ

以下

<!-- 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リンクで同じことをするいくつかの代替ソリューションを見つけましたが、この異常の正確な解と説明は見つかりませんでした。

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

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

そして、これはそれがさらに予期せぬ取得します。私も次のようにLINE 1とLINE 2を変えてみました。タイトルはまったく変更されず、代わりに<page-title>タグのディレクティブが定義されていないかのように、すべてのページのタイトルに直接<page-title></page-title>が印刷されます。これらの異常の両方についてAngularで説明したいと思います。 :(

出典

2016-12-07 Utkarsh

'$ scope.page.title'をどのように定義しますか？コントローラコードを追加できますか？ –

あなたのページのタイトルを定義していますが、これらの線に沿って何かを行うことができ、

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); 
     } 
    }; 
    } 
]);

その後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' 
     } 
     }); 
    } 
]);

をページタイトルを定義する方法がわかりませんタイトルタグ<title page-title></title>

指定したテキストでelement.textを設定すると、テンプレートで新しいタグを定義するだけで並べ替えられます。

出典

2016-12-07 22:27:34

こんにちは、Bangsi。返信ありがとうございますが、ng-Routeを使用しています。 ng-UI-routerではありません。 :( – Utkarsh

角度が予想外に本体内のタイトルタグ

答えて

関連する問題