admin管理员组文章数量:1220933
I am new to angular.js. I am trying to create a directive to add some title and meta tags in the <head> section of html documents, but I am having some trouble.
My index.html document is as following:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<base href="/">
<seo-title></seo-title>
<script src=".4.1/angular.min.js"></script>
<script src=".4.1/angular-route.min.js"></script>
<script src="/incl/js/myApp.js"></script>
</head>
<body >
<div ng-view></div>
</body>
</html>
My javascript is:
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>'
};
});
When I open the inspector, the directive has been moved to the <body> and has not been replaced with the template:
How can I create directives in the header?
P.S.: A code example would be great!
I am new to angular.js. I am trying to create a directive to add some title and meta tags in the <head> section of html documents, but I am having some trouble.
My index.html document is as following:
<!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>
My javascript is:
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>'
};
});
When I open the inspector, the directive has been moved to the <body> and has not been replaced with the template:
How can I create directives in the header?
P.S.: A code example would be great!
Share Improve this question asked Jul 7, 2015 at 19:28 Jérôme VerstryngeJérôme Verstrynge 59.6k95 gold badges295 silver badges466 bronze badges 4 |5 Answers
Reset to default 5Your directive does not need to go in the head to set the title. Just have your directive inject $window and set $window.document.title = 'your title'.
UPDATE This is how you can update meta tags.
For updating meta tags I would use a Directive like this:
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);
Along with a service to set the 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);
So in your head tag you would include the attribute mm-meta-tags. Then in your controller you would inject the metaTags service and call addMetaTag to update the tags.
You answer is here: Set Page title using UI-Router, implemented in your code it could be:
<!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>
and you js:
app.directive('seoTitle', function() {
return {
restrict: 'a',
template: 'works'
};
you just need to add a controller or some logic to set the title you want
First things first: I was looking in the inspector and yes, somehow the title tag appears within the body. But it seems not to affect its function.
Now to the solution: At first glance it seems that only
replace: true is missing in the declaration of the seoTitle directive.
Adding it solves the problem and the seo-title is replaced with title tag as planned, but Angular wraps the content in an additional span element as a new scope is created (even if the scope for seoTag is declared isolated scope: {}).
I came up with following solution:
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>',
};
});
Usage:
<seo-title>My Title</seo-title>
As already mentioned, with replace: true you can remove the wrapping seo-title tag.
In order to remove the additionally created span element,
I provide the compile function with returns the postLink function.
I can't really explain, why I need to use the transclude function within the postLink function.
It seems to be a quite common problem, that Angular creates an additional span element in this case.
With a little bit try and error I found that the easiest way to get rid of the span, is to emtpy() the element and append only the innerText.
You can try metang library. Beside title it supports other meta tags(description, author, og:, twitter:, etc)
angular.directive('ngHead', function () {
let strHtml = '';
strHtml += '<meta charset="utf-8">';
strHtml += '<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">';
strHtml += '<meta http-equiv="x-ua-compatible" content="ie=edge">';
strHtml += '<meta name="google" content="notranslate" />';
strHtml += '<title>';
strHtml += ' title';
strHtml += '</title>';
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.append(strHtml);
}
}
});
in your html <head ng-head></head>
work for me.
本文标签： javascriptHow to create an Angular directive in the ltheadgt section of a documentStack Overflow
版权声明：本文标题：javascript - How to create an Angular directive in the <head> section of a document? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1739314830a2157752.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
<seo-title>as a child of<head>. Regardless, the template doesn't replace the directive element - you could usereplace: true(but that is being deprecated), or you could just use an attribute directive instead<title seo-title></title>– New Dev Commented Jul 7, 2015 at 19:51titlewithrestrict:'E'for the directive – charlietfl Commented Jul 7, 2015 at 22:50