Как я могу использовать значения области видимости контроллера AngularJS в заголовке документа?
Я пытаюсь использовать мои значения области в моем заголовке тега заголовка. Это является внешним по отношению к элементу тела, в котором находится мой контроллер. Есть ли способ сделать это?
Вот мой HTML:
<!DOCTYPE html>
<html ng-app="soCLean">
<head>
<title>{{locale}} {{type}} {{service}}</title>
</head>
<body ng-controller="soCleanLandingPage">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>
var soClean = angular.module('soClean', []);
soClean.controller('soCleanLandingPage', ['$scope', function ($scope) {
$scope.locale = 'vancouver';
$scope.type = 'residential';
$scope.service = 'pressure washing';
$scope.serviceSingle = 'pressure wash';
}]);
</script>
</body>
</html>
Спасибо за вашу помощь.
2 ответа
Решение
Просто переместите ваш ng-контроллер в элемент html.
http://plnkr.co/edit/xImv48BvoW2Y9Ibb9JTq?p=preview(Вы можете увидеть значения в голове в отладчике)
<!DOCTYPE html>
<html ng-app="soClean" ng-controller="soCleanLandingPage">
<head>
<title>{{locale}} {{type}} {{service}}</title>
</head>
<body >
<div>
<p>{{locale}}</p>
<p>{{type}}</p>
<p>{{service}}</p>
<p>{{serviceSingle}}</p>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>
var soClean = angular.module('soClean', []);
soClean.controller('soCleanLandingPage', ['$scope', function ($scope) {
$scope.locale = 'vancouver';
$scope.type = 'residential';
$scope.service = 'pressure washing';
$scope.serviceSingle = 'pressure wash';
}]);
</script>
</body>
</html>
Вы можете использовать $rootScope:
app.run(function($rootScope){
$rootScope.locale = "en";
$rootScope.type = "something";
$rootScope.service = "another";
});
Вы также можете использовать необычную директиву:
app.directive('title', function(){
return {
restrict: 'E',
scope:{},
template: "{{locale}} {{type}} {{service}}",
link: function(scope){
scope.locale = "en";
scope.type = "something";
scope.service = "another";
}
}
});