如何基于AngularJS部分视图动态更改标头？

本文翻译自：How to dynamically change header based on AngularJS partial view?

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. 我正在使用ng-view包含AngularJS部分视图，并且我想根据所包含的视图更新页面标题和h1标头标签。 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. 如果是ASP.NET MVC，则可以使用@ViewBag来执行此操作，但是我不知道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：

<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: 我的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"; }

#1楼

参考：https://stackoom.com/question/qTSz/如何基于AngularJS部分视图动态更改标头

#2楼

You could define controller at the <html> level. 您可以在<html>级别定义控制器。

 <html ng-app="app" ng-controller="titleCtrl"><head><title>{{ Page.title() }}</title>...

You create service: Page and modify from controllers. 您创建服务： Page并从控制器进行修改。

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. 插入Page并从控制器调用'Page.setTitle（）'。

Here is the concrete example: http://plnkr.co/edit/0e7T6l 这是具体示例： http : //plnkr.co/edit/0e7T6l

#3楼

Here's a different way to do title changes. 这是更改标题的另一种方法。 Maybe not as scalable as a factory function (which could conceivably handle unlimited pages) but it was easier for me to understand: 也许不像工厂功能那样可扩展（可以想象处理无限的页面），但是对我来说更容易理解：

In my index.html I started like this: 在我的index.html中，我开始是这样的：

    <!DOCTYPE html><html ng-app="app"><head><title ng-bind-template="{{title}}">Generic Title That You'll Never See</title>

Then I made a partial called "nav.html": 然后我制作了一个部分名称为“ nav.html”：

<div ng-init="$root.title = 'Welcome'"><ul class="unstyled"><li><a href="#/login" ng-click="$root.title = 'Login'">Login</a></li><li><a href="#/home" ng-click="$root.title = 'Home'">Home</a></li><li><a href="#/admin" ng-click="$root.title = 'Admin'">Admin</a></li><li><a href="#/critters" ng-click="$root.title = 'Crispy'">Critters</a></li></ul>
</div>

Then I went back to "index.html" and added the nav.html using ng-include and the ng-view for my partials: 然后，我回到“ index.html”并使用ng-include和ng-view为我的局部添加了nav.html：

<body class="ng-cloak" ng-controller="MainCtrl"><div ng-include="'partials/nav.html'"></div><div><div ng-view></div></div>

Notice that ng-cloak? 注意到ng-cloak？ It doesn't have anything to do with this answer but it hides the page until it's done loading, a nice touch :) Learn how here: Angularjs - ng-cloak/ng-show elements blink 它与这个答案没有任何关系，但它会隐藏页面，直到完成加载为止，这很不错：)在这里了解如何： Angular.js-ng-cloak / ng-show元素闪烁

Here's the basic module. 这是基本模块。 I put it in a file called "app.js": 我把它放在一个名为“ app.js”的文件中：

(function () {'use strict';var app = angular.module("app", ["ngResource"]);app.config(function ($routeProvider) {// configure routes$routeProvider.when("/", {templateUrl: "partials/home.html",controller:"MainCtrl"}).when("/home", {templateUrl: "partials/home.html",controller:"MainCtrl"}).when("/login", {templateUrl:"partials/login.html",controller:"LoginCtrl"}).when("/admin", {templateUrl:"partials/admin.html",controller:"AdminCtrl"}).when("/critters", {templateUrl:"partials/critters.html",controller:"CritterCtrl"}).when("/critters/:id", {templateUrl:"partials/critter-detail.html",controller:"CritterDetailCtrl"}).otherwise({redirectTo:"/home"});});}());

If you look toward the end of the module, you'll see that I have a critter-detail page based on :id. 如果您看模块末尾，您会发现我有一个基于：id的生物详细页面。 It's a partial that is used from the Crispy Critters page. 这是Crispy Critters页面中使用的部分。 [Corny, I know - maybe it's a site that celebrates all kinds of chicken nuggets ;) Anyway, you could update the title when a user clicks on any link, so in my main Crispy Critters page that leads to the critter-detail page, that's where the $root.title update would go, just like you saw in the nav.html above: [Corny，我知道-也许这是一个庆祝各种鸡块的网站；）无论如何，当用户单击任何链接时，您都可以更新标题，因此在我的Crispy Critters主页中，它指向了critter-detail页面，这就是$ root.title更新的去向，就像您在上面的nav.html中看到的那样：

<a href="#/critters/1" ng-click="$root.title = 'Critter 1'">Critter 1</a>
<a href="#/critters/2" ng-click="$root.title = 'Critter 2'">Critter 2</a>
<a href="#/critters/3" ng-click="$root.title = 'Critter 3'">Critter 3</a>

Sorry so windy but I prefer a post that gives enough detail to get it up and running. 抱歉，这么多风，但是我更喜欢提供足够详细信息的文章，以使其开始运行。 Note that the example page in the AngularJS docs is out of date and shows a 0.9 version of ng-bind-template. 请注意，AngularJS文档中的示例页面已过时，并显示了0.9版本的ng-bind-template。 You can see that it's not that much different. 您可以看到没有太大的不同。

Afterthought: you know this but it's here for anyone else; 事后思考：您知道这一点，但其他任何人都可以在这里找到。 at the bottom of the index.html, one must include the app.js with the module: 在index.html的底部，必须在模块中包含app.js：

        <!-- APP --><script type="text/javascript" src="js/app.js"></script></body>
</html>

#4楼

I just discovered a nice way to set your page title if you're using routing: 我刚刚发现了一种使用路由设置页面标题的好方法：

JavaScript: 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: HTML：

<!DOCTYPE html>
<html ng-app="myApp">
<head><title ng-bind="'myApp &mdash; ' + title">myApp</title>
...

Edit : using the ng-bind attribute instead of curlies {{}} so they don't show on load 编辑：使用ng-bind属性代替curlies {{}}这样它们就不会在加载时显示

#5楼

Note that you can also set the title directly with javascript, ie, 请注意，您还可以直接使用javascript设置标题，即

$window.document.title = someTitleYouCreated;

This does not have data binding, but it suffices when putting ng-app in the <html> tag is problematic. 它没有数据绑定，但是当将ng-app放在<html>标记中有问题时就足够了。 (For example, using JSP templates where <head> is defined in exactly one place, yet you have more than one app.) （例如，使用仅在一个位置定义了<head> JSP模板，但您拥有多个应用程序。）

#6楼

Thanks to tosh shimayama for his solution. 感谢Tosh shimayama的解决方案。
I thought it was not so clean to put a service straight into the $scope , so here's my slight variation on that: http://plnkr.co/edit/QJbuZZnZEDOBcYrJXWWs 我认为将服务直接放入$scope并不是很干净，所以这是我的一点改动： http : //plnkr.co/edit/QJbuZZnZEDOBcYrJXWWs

The controller (that in original answer seemed to me a little bit too dumb) creates an ActionBar object, and this one is stuffed into $scope. 控制器（在我的原始回答中似乎有点愚蠢）创建了一个ActionBar对象，并将其填充到$ scope中。
The object is responsible for actually querying the service. 该对象负责实际查询服务。 It also hides from the $scope the call to set the template URL, which instead is available to other controllers to set the URL. 它还从$ scope中隐藏了设置模板URL的调用，而其他控制器可以使用该调用来设置URL。

如何基于AngularJS部分视图动态更改标头？相关推荐

基于angularjs的单页面实例_基于AngularJs的单页面程序
基于AngularJs的单页面程序在Abpzero的后台管理系统是一个AngularJs的单页面程序.当你登陆后,系统会跳转到"ApplicationController",然后 ...
SQL视图是什么？视图的作用，视图可以更改么？
SQL视图是什么?视图的作用,视图可以更改么? 视图就是一张虚拟的表视图是一个虚拟的表,是一个表中的数据经过某种筛选后的显示方式,视图由一个预定义的查询select语句组成. 在 SQL 中,视图是 ...
基于StringTemplate的视图
基于StringTemplate的视图一 StringTemplate介绍 StringTemplate 是一个可以生成原代码,web页面,emails和其它任何需要有格式的文本输出的模板引擎.它目 ...
php 改变页面元素,动态更改网页HTML元素(对象)内容_经验交流
动态HTML的出现为用户提供了一种基于传统标准HTML来创建交互式页面的机制.本文主要针对IE 5.0谈谈如何通过其提供的HTML文档对象(DOM)模型使用脚本添加.删除.修改页面中的HTML元素(对 ...
基于 AngularJS 的个推前端云组件探秘
本文为个推投稿,根据个推 Web 前端首席架构师姜季廷在 Meetup 野狗技术沙龙第三期的技术分享整理而成.他从 Angular 的特性.组件化之路以及个推云组件最佳实践和经验分享等维度为大家解读了 ...
skycons.js 基于canvas的天气动态js插件
skycons.js 基于canvas的天气动态js插件 skycons.js是一个开源的javascript天气动画图标渲染器.相当于gif动图一样. skycons CDN地址:https://w ...
SpringBoot整合mybatis、shiro、redis实现基于数据库的细粒度动态权限管理系统实例（转）...
SpringBoot整合mybatis.shiro.redis实现基于数据库的细粒度动态权限管理系统实例 shiro 目录(?)[+] 前言表结构 maven配置配置Druid 配置mybatis ...
Vivado Fir Ip核动态更改滤波器系数的两种方法
有时在设计过程中,可能需要不同的滤波效果,如果采样率一样的情况下,我们有两种方式进行切换系数. 第一种就是真正意义上的动态切换,如下图: 这种方式适合真正意义上的系数从新加载,但是配置相对复杂,但是省 ...
android动态更改布局宽高,动态更改Android上的线性布局宽度或高度
我试图动态更改线性布局或任何其他窗口小部件宽度或高度,但引发异常.动态更改Android上的线性布局宽度或高度我的布局: android:id="@+id/abc" androi ...

如何基于AngularJS部分视图动态更改标头？

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

如何基于AngularJS部分视图动态更改标头？相关推荐

最新文章

热门文章