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!
Aucun commentaire:
Enregistrer un commentaire