如何为 angularjs 路由中的每个视图指定 css
2017-08-23 12:04
405 查看
1.为
该指令执行以下操作:
它编译(使用
它将编译的
然后用它
注意: 这要求您的
2.使用以下命令指定哪些样式表属于哪些路由
此配置
当您移动到新视图时,该脚本会删除以前视图的样式。如果您不希望发生这种情况,只需从指令中删除以下代码:
如果路由为ui-router 即需要下载依赖(angular-ui-router-styles)来实现:
它允许您使用Angular的ui-router
用Bower通过安装
确保您的应用程序模块指定
将指令添加
向状态数据对象添加css文件相对路径
注意事项:
在路由上指定一个css属性是完全可选的。如果状态没有css属性,则该服务将对该路由不做任何事情。
您甚至可以对每个状态拥有多个特定于页面的样式表,其中css属性是相对路径数组或包含名称和href属性的对象数组。
如果存在父状态,则继承数据对象。
该指令执行以下操作:
它编译(使用
它将编译的
然后用它
转载地址:
如何为angular路由中的每个视图指定CSS
angular-route-styles
ocLazyLoad - Load modules on demand (lazy load)
in AngularJS
https://github.com/manuelmazzuola/angular-ui-router-styles
<head>元素创建自定义指令:
app.directive('head', ['$rootScope','$compile', function($rootScope, $compile){ return { restrict: 'E', link: function(scope, elem){ var html = '<link rel="stylesheet" ng-repeat="(routeCtrl, cssUrl) in routeStyles" ng-href="{{cssUrl}}" />'; elem.append($compile(html)(scope)); scope.routeStyles = {}; $rootScope.$on('$routeChangeStart', function (e, next, current) { if(current && current.$$route && current.$$route.css){ if(!angular.isArray(current.$$route.css)){ current.$$route.css = [current.$$route.css]; } angular.forEach(current.$$route.css, function(sheet){ delete scope.routeStyles[sheet]; }); } if(next && next.$$route && next.$$route.css){ if(!angular.isArray(next.$$route.css)){ next.$$route.css = [next.$$route.css]; } angular.forEach(next.$$route.css, function(sheet){ scope.routeStyles[sheet] = sheet; }); } }); } }; } ]);
该指令执行以下操作:
它编译(使用
$compile)一个HTML字符串,
<link />该
scope.routeStyles对象使用
ng-repeat和对象中的每个项目创建一组标签
ng-href。
它将编译的
<link />元素集合附加到
<head>标签。
然后用它
$rootScope来收听
'$routeChangeStart'事件。对于每个
'$routeChangeStart'事件,它捕获“当前”
$$route对象(用户即将离开的路由),并从
<head>标签中删除其部分特定的css文件。它还抓住“下一个”
$$route对象(用户即将去的路由),并将其部分特定的css文件添加到
<head>标签中。
ng-repeat编译
<link />标签的一部分根据添加到
scope.routeStyles对象或从对象中删除的内容,处理所有添加和删除页面特定样式表的所有内容。
注意: 这要求您的
ng-app属性在
<html>元素上,而不是
<body>内部的内容
<html>。
2.使用以下命令指定哪些样式表属于哪些路由
$routeProvider:
app.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/some/route/1', { templateUrl: 'partials/partial1.html', controller: 'Partial1Ctrl', css: 'css/partial1.css' }) .when('/some/route/2', { templateUrl: 'partials/partial2.html', controller: 'Partial2Ctrl' }) .when('/some/route/3', { templateUrl: 'partials/partial3.html', controller: 'Partial3Ctrl', css: ['css/partial3_1.css','css/partial3_2.css'] }) }]);
此配置
css为用于设置每个页面的路由的对象添加一个自定义属性。该对象被传递给每个
'$routeChangeStart'事件
.$$route。所以当听
'$routeChangeStart'事件时,我们可以抓取
css我们指定的属性,并
<link />根据需要附加/删除这些标签。请注意,
css在路由上指定属性是完全可选的,因为它在
'/some/route/2'示例中被省略。如果该路由没有
css属性,该
<head>指令将不会对该路由执行任何操作。还要注意,您甚至可以拥有每个路由的多个特定于页面的样式表,如上
'/some/route/3'例所示,其中的
css属性是该路由所需样式表的相对路径数组。
当您移动到新视图时,该脚本会删除以前视图的样式。如果您不希望发生这种情况,只需从指令中删除以下代码:
angular.forEach(current.$$route.css, function(sheet){ delete scope.routeStyles[sheet]; });
如果路由为ui-router 即需要下载依赖(angular-ui-router-styles)来实现:
它允许您使用Angular的ui-router
$stateProvider服务为应用程序声明部分特定或路由特定的样式。这可以解决这个问题,让你做这样的事情:
app.config(['$stateProvider', function($stateProvider){ $stateProvider .state('state1', { url: '/state1', controller: 'State1controller', template: '<div ui-view></div>', data: { css: [ 'styles/custom-state1.css', { name: 'layout', href: 'styles/state1-layout.css' } ] } }) .state('state1.state12', { url: '/:id', controller: 'State12Controller', templateUrl: 'views/my-template.html', data: { css: [ 'styles/custom-state1.state12.css', { name: 'layout', href: 'styles/state1.state12-layout.css' } ] } }) .state('state2', { url: '/state2', controller: 'State2Controller', templateUrl: 'views/another-template.html', data: { css: ['styles/custom-state2.css', 'styles/another.css'] } }) .state('state3', { url: '/state3', controller: 'State3Controller', templateUrl: 'views/another-super-template.html', data: { css: 'styles/custom-state3.css' } }) // more states can be declared here }]);
如何安装:
用Bower通过安装 bower install angular-ui-router-styles --save
确保您的应用程序模块指定
uiRouterStyles为依赖关系:
angular.module('myApplication', ['uiRouterStyles'])
将指令添加
ui-router-styles到您的身体标签或任何您想要的地方
<html> <head> <body ng-app="myApp" ui-router-styles> </head> </html>
向状态数据对象添加css文件相对路径
.state('state1', { url: '/state', controller: 'StateCtrl', templateUrl: 'views/my-template.html', data: { css: 'styles/some-overrides.css' } })
注意事项:
在路由上指定一个css属性是完全可选的。如果状态没有css属性,则该服务将对该路由不做任何事情。
您甚至可以对每个状态拥有多个特定于页面的样式表,其中css属性是相对路径数组或包含名称和href属性的对象数组。
如果存在父状态,则继承数据对象。
该指令执行以下操作:
它编译(使用
$compile)一个html字符串,它
data.css使用
ng-repeat和使用state属性中的每个项目创建一组标签
ng-href。
它将编译的
<link />元素集合附加到
<head>标签。
然后用它
$rootScope来收听
'$stateChangeSuccess'事件。对于每个
'$stateChangeSuccess'事件,它清除之前附加的所有css,并将新的css文件添加到
<head>标签中(如果有的话)。
转载地址:
如何为angular路由中的每个视图指定CSS
angular-route-styles
ocLazyLoad - Load modules on demand (lazy load)
in AngularJS
https://github.com/manuelmazzuola/angular-ui-router-styles
相关文章推荐
- AngularJs多重视图和路由的使用
- MVC中如何设置路由指定默认页
- AngularJS入门教程07:路由与多视图
- 一个数组保存了N个结构,每个结构保存了一个坐标,结构间的坐标都不相同,请问如何找到指定坐标的结构(除了遍历整个数组,是否有更好的办法)?
- AngularJS:router路由与多重视图详解
- angularjs如何在ng-repeat过程中控制字符串长度超过指定长度后面内容以省略号显示
- angularjs路由菜单如何强制刷新?
- sql 如何把一个查询结果当作一个表来查询?(sql:除非另外还指定了 TOP 或 FOR XML,否则,ORDER BY 子句在视图、内联函数、派生表、子查询)
- CSS中的字数如何在不换行状态下超过指定宽度自动隐藏?
- 一个数组保存了N个结构,每个结构保存了一个坐标,结构间的坐标都不相同,请问如何找到指定坐标的结构(除了遍历整个数组,是否有更好的办法)?
- [CSS]如何查看每个元素的盒子
- oracle中创建一个用户,只能查看指定的视图,如何授权,创建别名
- AngularJs多重视图和路由的使用
- AngularJs多重视图和路由的使用
- AngularJS 单路由多视图(Multiple Named Views)
- AngularJS 路由和多视图 之 hashchange
- 数据库创建视图时如何指定自定义列的类型
- 小技巧:如何在Oracle中快速定位到指定对象(表、视图、存储过程等) 【转】
- AngularJS实现使用路由切换视图的方法
- AngularJS 视图和路由