如何在文档的<head>部分创建角指令？
我是angular.js的新手。我试图创建一个指令，在html文档的<head>部分中添加一些标题和元标记，但我遇到了一些问题。
我的index.html文档如下：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<base href="/">
<seo-title></seo-title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.1/angular-route.min.js"></script>
<script src="/incl/js/myApp.js"></script>
</head>
<body >
<div ng-view></div>
</body>
</html>我的javascript是：
var app = angular.module ('myApp', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', { templateUrl: 'routes/home.html'})
.when('/pageA', { templateUrl: 'routes/pageA.html'})
.when('/pageB', { templateUrl: 'routes/pageB.html'})
.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode({
enabled: true
});
}]);
app.directive('seoTitle', function() {
return {
restrict: 'E',
template: '<title>{{seo.title}}</title>'
};
});当我打开检查器时，指令已经移动到<body>中，并且没有被模板替换：
如何在标题中创建指令？
P.S.:代码示例很好！
回答 5
Stack Overflow用户
发布于 2015-07-07 21:52:26
您的指令不需要在head中设置标题。只需让指令注入$window并设置$window.document.title = 'your title'即可。
更新--这就是如何更新元标记的方法。
为了更新元标记，我将使用如下指令：
mmMetaTags.$inject = ['metaTags'];
function mmMetaTags(metaTags) {
return {
restrict: 'A',
link: function(scope, element) {
metaTags.metaTags.forEach(function(tag) {
addMetaTag(tag.name, tag.content)
});
metaTags.subscribe(addMetaTag);
function addMetaTag(name, content) {
var tag = element[0].querySelector('meta[name="' + name + '"]');
if (tag) {
tag.setAttribute('content', content);
} else {
element.append('<meta name="' + name + '" content="' + content + '">');
}
}
}
}
}
directive('mmMetaTags', mmMetaTags);以及设置metaTags的服务：
function MetaTags() {
// private
this._tags = [];
// private
this._subscriber;
var self = this;
Object.defineProperty(this, 'metaTags', { get: function() {
return self._tags;
}});
}
MetaTags.prototype.addMetaTag = function(name, content) {
this._tags.push({ name: name, content: content });
this._updateSubscriber(name, content);
}
MetaTags.prototype.subscribe = function(callback) {
if (!this.subscriber) {
this._subscriber = callback;
} else {
throw new Error('Subscriber already attached. Only one subscriber may be added as there can only be one instance of <head>');
}
}
// private
MetaTags.prototype._updateSubscriber = function(name, content) {
this.subscriber(name, content);
}
service('metaTags', MetaTags);因此，在您的head标记中，您将包含属性mm-meta-tags。然后在控制器中注入metaTags服务并调用addMetaTag来更新标记。
Stack Overflow用户
发布于 2015-07-07 20:56:00
您的回答是：使用UI-路由器设置页面标题，在您的代码中实现它可以是：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<base href="/">
<title seo-title>doesn't work</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.1/angular-route.min.js"></script>
<script src="/incl/js/myApp.js"></script>
</head>
<body >
<div ng-view></div>
</body>
</html>你们这些js：
app.directive('seoTitle', function() {
return {
restrict: 'a',
template: 'works'
};您只需要添加一个控制器或一些逻辑来设置您想要的标题。
Stack Overflow用户
发布于 2015-07-07 21:41:59
第一件事是:我在看检查员，是的，不知怎么的，标题标签出现在身体里。但它似乎并没有影响到它的功能。
现在是解决方案:乍一看，在replace: true指令的声明中似乎只缺少了seoTitle。添加它可以解决这个问题，seo-title按照计划用title标记替换，但是在创建新的作用域(即使seoTag的作用域被声明为孤立的scope: {})时，它会将内容包装在一个额外的span元素中。
我想出了以下解决方案：
app.directive('seoTitle', function() {
function compile(elem, attrs, transclude) {
return function ($scope) {
transclude($scope, function (clone) {
elem.empty();
elem.append(clone[0].innerText);
});
};
}
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {},
compile: compile,
template: '<title ng-transclude></title>',
};
});用法：
<seo-title>My Title</seo-title>如前所述，使用replace: true，您可以删除包装seo-title标记。
为了删除额外创建的span元素，我为compile函数提供了返回postLink函数。
我无法真正解释，为什么我需要在transclude函数中使用postLink函数。这似乎是一个很常见的问题，在这种情况下，角创建了一个额外的span元素。经过一点点尝试和错误，我发现摆脱span最简单的方法是emtpy()元素，并且只追加innerText。
https://stackoverflow.com/questions/31277637
复制相似问题
腾讯云开发者
