web-dev-qa-db-ja.com

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>
angularjsmeta-tags
37
Amb
<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>
35
Vijayabaskaran M

angular-ui-router を使用する場合、 i-router-metatags を使用できます。

8
kuceram

サービスを作成し、$ windowといくつかの古典的な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.module('app').controller('TestController', ['MetadataService',function(MetadataService){

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

   }]);
7
Robo Rick

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

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

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

1
Jeff Whelpley

見つけた答えを微調整しました 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>
0
Engineer_Andrew