Amb*_*Amb 38 meta-tags 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>
小智 36
<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>
我在2天前通过创建服务,使用$ window和一些经典的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'
});
}]);
当您在大多数浏览器中“查看源代码”时，您会看到在对 DOM 进行任何 JavaScript 操作之前最初从服务器发送的文档。AngularJS 应用程序通常会执行大量 DOM 操作，但它实际上不会更改原始文档。当您在 FireFox 或 Chrome（使用开发工具）中执行右键单击 -> 检查元素之类的操作时，您将看到包含所有 JavaScript 更新的渲染 DOM。
因此，要回答您的问题，无法使用 JavaScript 更新描述元标记，以便更改将反映在“查看源代码”中。但是，您可以更新元描述标签，以便任何浏览器插件（例如书签应用程序等）都可以看到更新的描述。为此，您需要执行以下操作：
var metaDesc = angular.element($rootElement.find('meta[name=description]')[0]);
metaDesc.attr('content', description);
| 归档时间： |
|
| 查看次数： |
39638 次 |
| 最近记录： |