我已按照本教程进行操作，并尝试使用动态 seo 元数据服务。 https://weluse.de/blog/angularjs-seo-finally-a-piece-of-cake.html
但是，遇到了一个问题——似乎在 Controller 的 View 之外无法访问该服务。 <div ui-view></div>
这是我要实现的服务:
app.service('SeoMetaService', function() {
var metaDescription = '';
var metaKeywords = '';
var title = '';
return {
metaDescription: function() { return metaDescription; },
metaKeywords: function() { return metaKeywords; },
title: function() { return title; },
reset: function() {
metaDescription = '';
metaKeywords = '';
title = '';
},
setMetaDescription: function(newMetaDescription) {
metaDescription = newMetaDescription;
},
appendMetaKeywords: function(newKeywords) {
for(var i=0;i<newKeywords.length;i++){
if (metaKeywords === '') {
metaKeywords += newKeywords[i];
} else {
metaKeywords += ', ' + newKeywords[i];
}
}
},
setTitle: function(newTitle) { title = newTitle; }
};
});
Controller 中的用法:
app.controller('WelcomeController',['$scope', 'SeoMetaService', function($scope, SeoMetaService) {
$(document).ready(function() {
var keywords = ["bla bla","bla bla blah"];
SeoMetaService.setTitle("title bla bla bla");
SeoMetaService.setMetaDescription("description bla bla bla");
SeoMetaService.appendMetaKeywords(keywords);
console.log(SeoMetaService.metaDescription());
console.log(SeoMetaService.metaKeywords());
});
}]);
在主页(one-page-app)上，简化:
<html ng-app="MainPage">
<head>
<title>{{SeoMetaService.title()}}</title>
<meta name="description" content="{{ SeoMetaService.metaDescription() }}">
<meta name="keywords" content="{{ SeoMetaService.metaKeywords() }}">
<base href="/">
</head>
<body>
<div ui-view></div>
</body>
所以问题是 - 我认为 Angular 服务是单例。 但是，在运行 Controller 并设置数据后，它不会出现在 HTML 中。
如何修复/做什么？
最佳答案
我想你定义了 WelcomeController在 View 级别。
所以 SeoMetaService仅在 <div ui-view></div> 中存在的内部 html 中可见.
你需要定义 Controller WelcomeController在 <html> 级别或 <head> ，因为 SeoMetaService只能在定义 Controller 的标签内访问 WelcomeController .
此外，您需要删除对 JQuery 的引用并公开 SeoMetaService在$scope .
代码应该是这样的。
HTML:
<head ng-controller='WelcomeController'>
<title>{{SeoMetaService.title()}}</title>
<meta name="description" content="{{ SeoMetaService.metaDescription() }}">
<meta name="keywords" content="{{ SeoMetaService.metaKeywords() }}">
<base href="/">
</head>
Controller 更新:
app.controller('WelcomeController',['$scope', 'SeoMetaService', function($scope, SeoMetaService) {
var keywords = ["bla bla","bla bla blah"];
SeoMetaService.setTitle("title bla bla bla");
SeoMetaService.setMetaDescription("description bla bla bla");
SeoMetaService.appendMetaKeywords(keywords);
console.log(SeoMetaService.metaDescription());
console.log(SeoMetaService.metaKeywords());
// Added to the scope SeoMetaService
$scope.SeoMetaService = SeoMetaService;
}]);
请注意，您也可以在另一个 Controller 中更改 SeoMetaService 的内容，因此例如更改 View ，您可以更新标题、元描述和反射(reflect)新 View 内容的元关键字。
这是 Controller 的可能示例 MyViewController
app.controller('MyViewController',['$scope', 'SeoMetaService', function($scope, SeoMetaService) {
var keywords = ["xxx","yyy"];
SeoMetaService.setTitle("title my view");
SeoMetaService.setMetaDescription("description my view");
SeoMetaService.appendMetaKeywords(keywords);
}]);
当你使用 Controller 进入 View 时MyViewController关键字、标题、元描述和元关键字将被更新。
关于javascript - 用于存储 SEO 元数据的 AngularJS 服务，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39094609/