AngularJSでメタタグを更新するにはどうすればよいですか？

私はAngularJSを使用してアプリケーションを開発しています。私はルート変更のメタタグを更新したい。
AngularJSのメタタグを更新するにはどうすればよいですか？これはページの「ビューソース」に表示されますか？ここAngularJSでメタタグを更新するにはどうすればよいですか？

はHTMLコードです -

<!DOCTYPE html> 
    <html ng-app="app"> 
     <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
      <meta name="fragment" content="!" /> 
      <meta name="title" content="Test App"> 
      <meta name="description" content="Test App"> 
      <meta name="keywords" content="Test,App"> 

      <link rel="stylesheet" href="css/jquery-ui-1.10.2.custom.min.css" /> 
      <link rel="stylesheet" href="css/extra.css" /> 
      <script src="js/libs/jquery-1.8.3.min.js"></script> 
      <script src="js/libs/jquery-ui-1.10.2.custom.min.js"></script> 
      <script src="js/libs/angular.min.js"></script> 
      <script src="js/controller.js"></script> 
      <script src="js/routes.js"></script> 
     </head> 
     <body> 
      <div ng-controller="mainCtrl" class="main-container" loading> 
       <div class="container-holder"> 
        <div class="container"> 
         <div ng-include src='"elements/header.html"'></div> 
         <div ng-view class="clearfix"></div> 
        </div> 
       </div> 

       <div ng-controller="userCtrl" id="test"> 
        <div class="container" class="login-container"> 
         <div id="login-logo"> 
          <img src="images/logo-300.png" alt="" class="login-img"/> 
          <br /> 
          <div ng-view></div> 
         </div> 
        </div> 
       </div> 
     </body> 
    </html>

出典

2013-04-20 Amb

あなたのWebアプリケーションはビューを変更するだけの1ページアプリケーションなので、 'ng-view'を使用していますか？ – callmekatootie

あなたは 'view source'を更新することはできません。これはサーバーが送信するものです。あなたがやろうとしていることをより詳細に説明してください – charlietfl

はい私はng-viewを使用しています.. – Amb

あなたは、ほとんどのブラウザの「ソースの表示」を行うと、あなたはもともとDOMの任意のJavaScriptを操作する前に、サーバから送信されたドキュメントを参照してください。 AngularJSアプリは通常、多くのDOM操作を行いますが、実際には元のドキュメントを変更することはありません。 FireFoxやChromeの（devツールを使用して）右クリック - > inspect要素をクリックすると、すべてのJavaScriptアップデートを含むレンダリングされたDOMが表示されます。

あなたの質問に答えるために、JavaScriptで説明メタタグを更新して、その変更を 'ビューソース'に反映させる方法はありません。ただし、ブラウザのプラグイン（ブックマークアプリなど）に更新された説明が表示されるようにメタ記述タグを更新できます。あなたはこのようなものだろうことを行うには：

var metaDesc = angular.element($rootElement.find('meta[name=description]')[0]); metaDesc.attr('content', description);

出典

2013-08-08 12:19:07

この問題についても検討していますが、検討中の解決策の1つはセクションにディレクティブを追加することです$ routeChangeSuccessイベントの間に起動された$ emit（）呼び出しに基づく対応するMETAタグ... –

@dacopenhagen私はそのプロジェクトに参加して以来、しばらくしていましたが、正しくリコールすればカスタムディレクティブを実装しましたサードパーティのサービス（名前を忘れる）を使用して、各ページをSEOの目的で検索エンジンに事前レンダリングされたコンテンツとして配信する –

<html ng-app="app"> 
    <title ng-bind="metaservice.metaTitle()">Test</title> 
    <meta name="description" content="{{ metaservice.metaDescription() }}" /> 
    <meta name="keywords" content="{{ metaservice.metaKeywords() }}" /> 


<script> 
    var app = angular.module('app',[]); 
    app.service('MetaService', function() { 
     var title = 'Web App'; 
     var metaDescription = ''; 
     var metaKeywords = ''; 
     return { 
      set: function(newTitle, newMetaDescription, newKeywords) { 
       metaKeywords = newKeywords; 
       metaDescription = newMetaDescription; 
       title = newTitle; 
      }, 
      metaTitle: function(){ return title; }, 
      metaDescription: function() { return metaDescription; }, 
      metaKeywords: function() { return metaKeywords; } 
     } 
    }); 

    app.controller('myCtrl',function($scope,$rootScope,MetaService){ 
     $rootScope.metaservice = MetaService; 
     $rootScope.metaservice.set("Web App","desc","blah blah"); 
    }); 
</script> 
<body ng-controller="myCtrl"></body> 


</html>

出典

2014-10-31 08:05:28

あなたは正しい。しかし私は＃を使用しています！ Googleのハッシュバンソリューションを使用して、静的ページにレンダリングされたメタタグがあるようにします。 – nathanengineer

私はいくつかのタイプミスを修正したとしても、同じ問題があり、あなたのソリューションは動作しません（JSエラー）...あなたの答えを修正して、本当に答えを教えてください。ありがとう。 – c4k

Pls verify ng-app initセクション：とと置き換えてに置き換えてください... –

を自分のサイトでこの仕事をするためにhereを見つけた答えを微調整しました。ルートコンフィグレーションでメタコンテンツを確立し、関数を$ routeChangeSuccessイベントにバインドして、設定された値を$ rootScopeに入れます。あなたのメタタグが$ rootScope値に束縛されている限り、すべてが計画どおりに動くでしょう。

angularApp.run(['$rootScope', function ($rootScope) { 
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) { 
     $rootScope.title = current.$$route.title; 
     $rootScope.description = current.$$route.description; 
     $rootScope.keywords = current.$$route.keywords; 
    }); 
}]); 

angularApp.config(function ($routeProvider, $locationProvider) { 
    $routeProvider 
     .when('/About', { 
      templateUrl: 'Features/About/About.html', 
      title: 'Here\'s the Title', 
      description: 'A Nice Description', 
      keywords: 'Some, Keywords, Go, Here' 
     }); 

    // use the HTML5 History API 
    $locationProvider.html5Mode(true); 
    $locationProvider.hashPrefix('!'); 
}); 

<head> 
    <meta charset="utf-8" /> 
    <meta name="keywords" content="{{keywords}}"/> 
    <meta name="description" content="{{description}}"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="fragment" content="!" /> 

    <title ng-bind="title">A Placeholder Title</title> 
    <link rel="icon" href="/Images/Logo.ico"> 
    <base href="/" /> 
    @Styles.Render("~/Content/css") 
</head>

出典

2015-08-30 20:44:03

タイトルの内容がng-bindなのか、その他はかっこ{{}}で囲まれていますか？ – ShibinRagh

@ShibinRagh私はもともとng-bindを使用していて、二重中括弧に切り替えたと思います。私はちょうどタイトルの1つを見逃しているに違いない。私は二重チェックして、タイトルの二重括弧を使ってもうまくいきます。しかし、私は、この解決策が "それ以外の"設定では機能しないことを発見しました。いつか私はいつかその周りの別の方法を考え出すでしょう。 –

私は、サービスを作成し、$窓、プラスいくつかの古典的なJavaScriptを使用して、約2日前に、この非常に問題を解決しました。あなたのHTMLマークアップで

何が必要メタタグ作成...（今は空白にそれらを残して自由に感じる、またはデフォルト値にそれらを設定することができます。）

<head> 
    <meta name="title"/> 
    <meta name="description"/> 
</head>

その後、我々はよそのようなサービスを作成する必要があります。

angular.module('app').service('MetadataService', ['$window', function($window){ 
var self = this; 
self.setMetaTags = function (tagData){ 
    $window.document.getElementsByName('title')[0].content = tagData.title; 
    $window.document.getElementsByName('description')[0].content = tagData.description; 
}; 
}]);

今、私たちは（初期化時）コントローラ内から「self.setMetaTags」サービスを使用する必要があります...あなたは、単にコントローラ上の任意の場所に関数を呼び出します。あなたがangular-ui-routerを使用している場合

angular.module('app').controller('TestController', ['MetadataService',function(MetadataService){ 

    MetadataService.setMetaTags({ 
     title: 'this', 
     description: 'works' 
    }); 

    }]);

出典

2016-02-20 06:23:43

+1ですが、 '$ window.document.getElementsByName（ 'title'）[0] .content = tagData.title;'を '$ window.document.title = tagData.title'に変更しただけで私はうまくいきました。 –

、あなたはui-router-metatagsを使用することができます。

出典

2016-04-04 12:40:45 kuceram

AngularJSでメタタグを更新するにはどうすればよいですか？

答えて

関連する問題