如何在 AngularJS 中更新元标记? [英] How can I update meta tags in AngularJS?

查看：22
本文介绍了如何在 AngularJS 中更新元标记?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 AngularJS 开发应用程序.我想在路线更改时更新元标记.
如何在 AngularJS 中更新可以在页面上的查看源代码"中显示的元标记?

这是一个 HTML 代码 - 

 <html ng-app="app"><头><meta name="viewport" content="width=device-width, initial-scale=1.0"><元名称=片段"内容=！"/><meta name="title" content="测试应用程序"><meta name="description" content="测试应用程序"><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><身体><div ng-controller="mainCtrl" class="main-container"加载><div class="container-holder"><div class="容器"><div ng-include src='"elements/header.html"'></div><div ng-view class="clearfix"></div>

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

</html>

解决方案 

<title ng-bind="metaservice.metaTitle()">测试</title><meta name="description" content="{{ metaservice.metaDescription() }}"/><meta name="keywords" content="{{ metaservice.metaKeywords() }}"/><脚本>var app = angular.module('app',[]);app.service('MetaService', function() {var title = '网络应用';var metaDescription = '';var metaKeywords = '';返回 {设置:功能(新标题，新元描述，新关键字){元关键字 = 新关键字；元描述 = 新元描述；标题 = 新标题；},元标题:函数(){返回标题；},元描述:函数(){返回元描述；},元关键字:函数(){ 返回元关键字；}}});app.controller('myCtrl',function($scope,$rootScope,MetaService){$rootScope.metaservice = MetaService;$rootScope.metaservice.set("Web App","desc","blah blah");});<body ng-controller="myCtrl"></body></html>

I am developing an application using AngularJS. I want to update meta tags on route change.
How can I update meta tags in AngularJS which can be shown in "view source" on the page?

here is a HTML code - 

  <!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>

解决方案 

<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>

这篇关于如何在 AngularJS 中更新元标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆