如何基于AngularJS部分视图动态更改头？
我正在使用ng-view来包含AngularJS部分视图，并且我想基于包含的视图更新页面标题和h1头标签。但是，这些都超出了部分视图控制器的范围，所以我无法确定如何将它们绑定到控制器中的数据集。
如果是ASP.NET MVC，您可以使用@ViewBag来完成此操作，但我不知道AngularJS中的等同功能。我已经搜索了共享服务，事件等，但仍然不能使它工作。任何方法来修改我的例子，以便它的工作将是非常感谢的。
我得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>
我的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"; }
共有2个答案
我刚刚发现了一个很好的方法来设置您的页面标题，如果您使用的是路由：
JavaScript：
var myApp = angular.module('myApp', ['ngResource'])
myApp.config(
['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
title: 'Home',
templateUrl: '/Assets/Views/Home.html',
controller: 'HomeController'
});
$routeProvider.when('/Product/:id', {
title: 'Product',
templateUrl: '/Assets/Views/Product.html',
controller: 'ProductController'
});
}]);
myApp.run(['$rootScope', function($rootScope) {
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
$rootScope.title = current.$$route.title;
});
}]);
HTML：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title ng-bind="'myApp — ' + title">myApp</title>
...
编辑：使用ng-bind属性，而不是卷边{{}}，这样它们就不会在加载时显示
您可以在级别定义控制器。
<html ng-app="app" ng-controller="titleCtrl">
<head>
<title>{{ Page.title() }}</title>
...
您可以创建service:page并从控制器修改。
myModule.factory('Page', function() {
var title = 'default';
return {
title: function() { return title; },
setTitle: function(newTitle) { title = newTitle }
};
});
注入page并从控制器调用“Page.SetTitle（）”。
下面是具体的例子:http://plnkr.co/edit/0e7t6l
-
问题内容： 我正在使用ng- view来包含AngularJS部分视图，并且我想根据所包含的视图来更新页面标题和h1标头标签。但是，这些超出了部分视图控制器的范围，因此我无法弄清楚如何将它们绑定到控制器中的数据集。 如果是ASP.NET MVC，则可以使用@ViewBag进行此操作，但是我不知道AngularJS中的等效方法。我已经搜索了有关共享服务，事件等的信息，但仍然无法正常运行。任何修改我的
-
问题内容： 我想基于变量在Angular.js ng-repeat上显示不同的limitTo数字。 这是我的代码： 并在控制器中： 我只能假设有一种基于搜索输入来更改limitTo的更优雅的方法，我只是不知道要寻找什么。 您可以在http://happinesshunt.co上看到此代码的实现。 PS：我是新来的，而且是开发的新手，所以，如果未正确提出问题，请原谅我。 谢谢你！ 问题答案： 这可能
-
问题内容： 现在，我有一个背景图像URL硬编码到CSS中。我想使用AngularJS中的逻辑动态选择背景图片。这是我目前拥有的： HTML CSS 如您所见，CSS中的背景图像引用了特定的文件位置。我希望能够以编程方式确定图像URL的位置。我真的不知道从哪里开始。我不知道JQuery。谢谢。 问题答案： 您可以使用ng-style使用AngularJS动态更改CSS类属性。 希望这个ng样式的示例
-
问题内容： 我想用于单个页面的webapp。我担心是否有一种优雅的方法可以根据客户端是移动设备还是台式机来“发送”不同的模板。有什么办法吗？是否建议Web服务器“了解”浏览器是什么并相应地发送视图，以便浏览器始终要求输入template.html或编写JavaScript，以便浏览器告诉Web服务器获取mobile / template.html？ 问题答案： 我将如何向用户显示一个模板并使该模板
-
问题内容： 我很难找到有关通过数据库动态使用ui路由器的任何文档。当然，所有内容都经过硬编码。 我的杰森： 我的应用程式： 我很难动态配置视图。有任何想法吗？ 更新： 我根据RadimKöhler 的回答做了一个Plunker。感谢您的帮助。 我认为ui-router是defacto路由器，它具有动态性，它将使大型应用程序更易于管理。 问题答案： 有一个显示我们如何动态配置视图的插件。的更新版本如
-
我对中的有一个问题。 下面是我的代码： 问题：在中按下时，会像它应该的那样消失，取而代之。但是，并不会消失，而是停留在视图B的顶部。 当更改为时，如何强制关闭？请注意，也可以由以外的其他视图更改，因此只将传递给并在单击时将其设置为false并不能完成此工作。