如何更新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>
当您在大多数浏览器“查看源文件”，你看，最初是从服务器的DOM的任何JavaScript操作之前发送的文档。 AngularJS应用程序通常会执行大量DOM操作，但它实际上从未改变原始文档。当你做点右键点击 - >检查FireFox或Chrome中的元素（使用开发工具）时，你会看到包含所有JavaScript更新的呈现DOM。
因此，要回答您的问题，无法使用JavaScript更新描述元标记，以便更改将反映在“查看源代码”中。但是，您可以更新元描述标签，以便任何浏览器插件（例如书签应用程序等）都能看到更新的描述。要做到这一点，你会做这样的事情：
var metaDesc = angular.element($rootElement.find('meta[name=description]')[0]); metaDesc.attr('content', description);
我们也在研究这个问题，我们正在审查的一个潜在解决方案是向更新的
部分添加指令在$ routeChangeSuccess事件期间触发$ emit（）调用的相应META标记... – 2014-07-31 17:43:45@dacopenhagen自从我开始使用该项目以来，已经有一段时间了，但是如果我记得我们正确地实现了自定义指令，使用第三方服务（忘记名称）将每个页面作为预先呈现的内容提供给搜索引擎用于SEO目的 – 2015-08-30 00:07:55
<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>
您是对的。但我正在使用＃！ hashbang解决方案，所以静态页面具有渲染元标记。 – nathanengineer 2014-11-15 17:03:24
即使我纠正了几个错别字，我也遇到了同样的问题，并且您的解决方案无法正常工作（JS错误）...您能否纠正您的答案并解释一点让它成为真正的答案？谢谢。 – c4k 2015-03-19 15:59:59
请验证ng-app初始化部分：
用和替换为并且它正在工作... – 2016-03-26 15:37:49
我调整了答案发现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>
为什么标题内容ng-bind，括号{}}中的其他人？ – ShibinRagh 2016-10-07 08:16:42
@ShibinRagh我想我最初使用的是ng-bind，然后将它切换为双曲花括号。我一定错过了冠军头衔。我仔细检查，并使用标题作品的双曲线也很好。但是，我确实发现这种解决方案不适用于“其他”设置。也许有一天我会找出另一种方式。 – 2016-10-12 21:14:16
我解决了这个问题非常大约2天前，通过创建服务，并使用$窗口，再加上一些经典的JavaScript。
在你的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'
});
}]);
+1，但它只适用于当我更改'$ window.document.getElementsByName（'title'）[0] .content = tagData.title;'到'$ window.document.title = tagData.title' – 2016-03-01 09:23:25
您是否在使用'ng-view'，因为在您的web应用程序中只有一个页面应用程序只改变视图？ – callmekatootie 2013-04-20 12:09:48
你无法更新'view source' ...这是服务器发送的内容。更详细地解释你想做什么 – charlietfl 2013-04-20 12:14:42
是的，我正在使用ng-view .. – Amb 2013-04-20 12:15:41