我怎么可以更新angularjs meta标签？ [英] how can i update meta tags in angularjs?
本文介绍了我怎么可以更新angularjs meta标签？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用angularjs开发应用。我想uppdate路线变化的meta标签。
我如何更新angularjs meta标签，可以在页面的查看源文件？
下面是一个HTML code -
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=应用程序＆GT;
＆LT; HEAD＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1.0＆GT;
＆LT;！META NAME =片段的内容= /＆GT;
＆LT; META NAME =标题CONTENT =测试应用程序＆GT;
＆LT; META NAME =说明内容=测试应用程序＆GT;
＆LT; META NAME =关键词内容=测试，应用＆GT; ＆LT;链接rel =stylesheet属性HREF =CSS / jQuery的-UI-1.10.2.custom.min.css/＆GT;
＆LT;链接rel =stylesheet属性HREF =CSS / extra.css/＆GT;
＆LT;脚本SRC =JS /库/ jQuery的-1.8.3.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /库/ jQuery的-UI-1.10.2.custom.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /库/ angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / controller.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / routes.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV NG控制器=mainCtrl级=主容器装载＆GT;
＆LT; DIV CLASS =集装箱持有人＆GT;
＆LT; DIV CLASS =容器＆GT;
＆LT; DIV NG-包括SRC ='的元素/ header.html中'＆GT;＆LT; / DIV＆GT;
＆LT; DIV NG-view类=clearfix＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV NG控制器=userCtrlID =测试＆GT;
＆LT; DIV CLASS =容器类=登录容器＆GT;
＆LT; DIV ID =登陆车标＆GT;
＆LT; IMG SRC =图像/徽标300.pngALT =级=登录-IMG/＆GT;
＆LT; BR /＆GT;
＆LT; DIV NG-视图＆gt;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
＆LT; HTML NG-应用=应用程序＆GT;
＆LT;标题NG绑定=metaservice.metaTitle（）＆GT;测试与LT; /标题＆GT;
＆LT; META NAME =说明内容={{metaservice.metaDescription（）}}/＆GT;
＆LT; META NAME =关键词内容={{metaservice.metaKeywords（）}}/＆GT;
＆LT;脚本＆GT;
VAR应用= angular.module（'应用'，[]）;
app.service（'MetaService'，函数（）{
VAR标题='Web应用程序';
VAR metaDescription ='';
VAR的MetaKeywords ='';
返回{
设置：功能（newTitle的newMetaDescription，newKeywords）{
的MetaKeywords = newKeywords;
metaDescription = newMetaDescription;
标题= newTitle的;
}，
metaTitle：函数（）{返回称号; }，
metaDescription：函数（）{返回metaDescription; }，
的MetaKeywords：函数（）{返回的MetaKeywords; }
}
}）; app.controller（'myCtrl'，函数（$范围，$ rootScope，MetaService）{
$ rootScope.metaservice = MetaService;
$ rootScope.metaservice.set（Web应用程序，递减，等等等等）;
}）;
＆LT; / SCRIPT＆GT;
＆LT;机身NG控制器=myCtrl＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
I am developing application using angularjs. I want to uppdate meta tags on route change.
How can I update meta tags in angularjs which can be shown in "view source" of 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 meta标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
