如何基于AngularJS局部视图动态地更改标题？ [英] How to dynamically change header based on AngularJS partial view?
问题描述
我使用的NG-视图，包括AngularJS部分意见，我想更新基础上，包含视图页面标题和H1标题标签。这些都是出了局部视图控制器的范围，虽然，所以我无法弄清楚如何将它们绑定到数据控制器设置。
如果这是ASP.NET MVC，你可以使用@ViewBag要做到这一点，但我不知道在AngularJS同等学历。我搜索关于共享服务，活动等，但仍无法得到它的工作。任何方式修改我的例子所以它的工作原理是多少AP preciated。
我的HTML：
＆LT; HTML数据-NG-应用=MyModule的＆GT;
＆LT; HEAD＆GT;
＆LT;！ - 包含js文件 - ＆GT;
＆LT;标题＆GT;＆LT;！ - 应该改变的时候NG-观的变化 - ＆GT;＆LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; H1＆GT;＆LT;！ - 应该改变的时候NG-观的变化 - ＆GT;＆LT; / H1＆GT;＆LT; DIV数据-NG-视图＆gt;＆LT; / DIV＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
我的javascript：
VAR Mymodule中= angular.module（'Mymodule中'，[]）;
myModule.config（['$ routeProvider'，函数（$ routeProvider）{
$ routeProvider。
当（'/ test1的'，{templateUrl：test1.html'，控制器：Test1Ctrl}）。
当（'/ test2的'，{templateUrl：test2.html'，控制器：Test2Ctrl}）。
否则（{redirectTo：'/ TEST1'}）;
}]）;功能Test1Ctrl（$范围，$ HTTP）{$ scope.header =测试1;
/ * ^我怎样才能把这个标题和H1 * /}
功能Test2Ctrl（$范围，$ HTTP）{$ scope.header =测试2; }
您可以定义在控制器中的＆LT; HTML方式＆gt; 级别
＆LT; HTML NG-应用=应用程序NG控制器=titleCtrl＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT; {{Page.title（）}}＆LT; /标题＆GT;
...
您创建服务：页和控制器修改
myModule.factory（'页面'，函数（）{
VAR标题=默认;
返回{
标题：函数（）{返回称号; }，
的setTitle：功能（newTitle的）{标题=} newTitle的
};
}）;
注入从控制器页和呼叫'Page.setTitle（）'。
下面是具体的例子： http://plnkr.co/edit/0e7T6l
I am using ng-view to include AngularJS partial views, and I want to update the page title and h1 header tags based on the included view. These are out of scope of the partial view controllers though, and so I can't figure out how to bind them to data set in the controllers.
If it was ASP.NET MVC you could use @ViewBag to do this, but I don't know the equivalent in AngularJS. I've searched about shared services, events etc but still can't get it working. Any way to modify my example so it works would be much appreciated.
My HTML:
<html data-ng-app="myModule">
<head>
<!-- include js files -->
<title><!-- should changed when ng-view changes --></title>
</head>
<body>
<h1><!-- should changed when ng-view changes --></h1>
<div data-ng-view></div>
</body>
</html>
My JavaScript:
var myModule = angular.module('myModule', []);
myModule.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/test1', {templateUrl: 'test1.html', controller: Test1Ctrl}).
when('/test2', {templateUrl: 'test2.html', controller: Test2Ctrl}).
otherwise({redirectTo: '/test1'});
}]);
function Test1Ctrl($scope, $http) { $scope.header = "Test 1";
/* ^ how can I put this in title and h1 */ }
function Test2Ctrl($scope, $http) { $scope.header = "Test 2"; }
You could define controller at the <html> level.
<html ng-app="app" ng-controller="titleCtrl">
<head>
<title>{{ Page.title() }}</title>
...
You create service: Page and modify from controllers.
myModule.factory('Page', function() {
var title = 'default';
return {
title: function() { return title; },
setTitle: function(newTitle) { title = newTitle }
};
});
Inject Page and Call 'Page.setTitle()' from controllers.
Here is the concrete example: http://plnkr.co/edit/0e7T6l
这篇关于如何基于AngularJS局部视图动态地更改标题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
