改变bodyj背景颜色与angularjs [英] Changing body background color with angularjs
问题描述
我想要根据当前路径是否更改< body> 的背景颜色。
我尝试这样做通过检查$ location.path（）每当路径更改，然后使用 ng风格指令更改背景颜色，但这似乎
p>这是我写的代码，如果有人想看到它。
app.controller（'backgroundCtrl'，['$ rootScope '，'$ scope'，'$ route'，'$ location'，function（$ rootScope，$ scope，$ route，$ location）{
$ rootScope。 {
if（$ location.path（）=='/'）{
$ scope.backgroundStyle = {background：'#ffffff'};
} else {
$ scope.backgroundStyle = {background：'＃000000'};
}
}）;
}]）;
内容等，通常可以创建另一个包含接口（自定义提供程序）的角度模块，可以让您在配置级别之前和之后访问这些更改。这里有一个 plunker 来提供我将在下面讨论的内容。 p>
对于这个答案，我创建了一个小型模块（route-data.js）与提供程序，RouteData暴露
两个函数配置：
applyConfig（） - 分配要在RouteData服务中访问的设置。
hookToRootScope（） - 将 $ rootScope 中的RouteData服务挂钩，
RouteData提供程序具有 RouteData（）服务，可提供对方法的访问它设置并获取 $ routeProvider 配置中提供的 RouteData 设置。
（如果您不熟悉提供者和服务，请阅读更多信息此处）
（如果您不熟悉 config（）和 run（）方法，您可以在此处中阅读更多信息
route-data.js
angular.module（'RouteData'，[]）。
provider（'RouteData'，function（）{
var settings = {};
var hookToRootScope = false;
this.applyConfig = function （newSettings）{
settings = newSettings;
};
this.hookToRootScope = function（enableRootScopeHook）{
hookToRootScope = enableRootScopeHook;
};
function RouteData（）{
this.set = function（index，value）{
settings [index] = value;
};
this.get = function（index）{
if（settings.hasOwnProperty（index））{
return settings [index];
} else {
console.log（'RouteData：尝试访问尚未设置的属性'）;
}
};
this.isHookedToRootSope = function（）{
return hookToRootScope;
};
}
this。$ get = function（）{
return new RouteData（）;
};
}）。
run（['$ location'，'$ rootScope'，'RouteData'，function（$ location，$ rootScope，RouteData）{
if（RouteData.isHookedToRootSope（））{
$ rootScope.RouteData = RouteData;
}
$ rootScope。$ on（'$ routeChangeStart'，function（event，current，previous）{
var route = current $ $$ route;
if（typeof（route）！=='undefined'&&&&typeof（route ['RouteData']）！=='undefined'）{
var data = route ['RouteData'];
for（var index in data）
RouteData.set（index，data [index]）;
}
}）;
}]）;
下面的脚本通过在配置级别注入RouteDataProvider来显示如何使用RouteData Module默认配置如 bodyStyle 通过 RouteDataProvider.applyConfig（），您也可以在应用程序完全添加之前添加更多设置运行。通过将 RouteDataProvider.hookToRootScope（）设置为true，将它挂接在$ rootScope中。最后，添加数据， RouteData 例如
RouteData：{
bodyStyle：{
'background-color'：'green'
}
由$ routeProvider发送并由 run（）在RouteData模块中定义的方法，它初始化应用程序中要访问的RouteData服务的设置。
script.js
angular.module（'app'，['ngRoute'，'RouteData' ]）。
config（['$ routeProvider'，'RouteDataProvider'，function（$ routeProvider，RouteDataProvider）{
RouteDataProvider.applyConfig（{
bodyStyle：{
'background -color'：'white'
}
}）;
RouteDataProvider.hookToRootScope（true）;
$ routeProvider.when '，{
RouteData：{
bodyStyle：{
'background-color'：'green'
}
}，
templateUrl：'landing。 html'，
controller：'LandingController'
}）when（'/ login'，{
RouteData：{
bodyStyle：{
'background-color' ：'gray'，
padding：'10px'，
border：'5px solid black'，
'border-radius'：'1px solid black'
}
}，
templateUrl：'login.html'，
controller：'LoginController'
}），否则（{
redirectTo：'/ landing'
} ;
}]）。
controller（'LoginController'，['$ scope'，function（$ scope）{
}]）。
controller（'LandingController'，['$ scope'，function（$ scope）{
}]）;
因此，要在索引页或任何其他页面中添加的最后一段代码
index.html 的一部分
< body ng-style =RouteData.get（'bodyStyle'）>
< a href =＃/ landing> Landing< / a> |
< a href =＃/ login>登录< / a>
< div ng-view>< / div>
< / body>
I want to be able to change the background color of <body> depending on what the current path is.
I tried doing it by checking $location.path() whenever the path was changed and then using the ng-style directive to change the background color but this seems like a hack (and didn't work).
What would be a more decoupled way to achieve this?
Here's the code I wrote if anyone wants to see it.
app.controller('backgroundCtrl', ['$rootScope', '$scope', '$route', '$location', function($rootScope, $scope, $route, $location){
$rootScope.$on('$routeChangeStart', function(){
if ($location.path() == '/'){
$scope.backgroundStyle = {background: '#ffffff'};
} else {
$scope.backgroundStyle = {background: '#000000'};
}
});
}]);
To decouple such a dynamic change in style, data, content and etc., it is often practical to create another angular module that contains an interface(Custom Provider) that can give you access to these changes before and after the configuration level. Here is a plunker to provide a view of what I'll be discussing below.
For this answer, I have created a small module(route-data.js) with a provider, RouteData, which exposes
two function configurations:
applyConfig() - assigns settings to be accessed in the RouteData service.
hookToRootScope() - hooks the RouteData service in the $rootScope hence making it available to all child scopes to be created and the entire application.
The RouteData provider has a RouteData() service that provides access to methods which sets and gets RouteData settings that will be provided in the $routeProvider configuration.
(If you're not familiar with providers and services, read more about it here)
(If you're not familiar with the config() and run() methods, you can read more in here)
route-data.js
angular.module('RouteData', []).
provider('RouteData', function () {
var settings = {};
var hookToRootScope = false;
this.applyConfig = function(newSettings) {
settings = newSettings;
};
this.hookToRootScope = function(enableRootScopeHook) {
hookToRootScope = enableRootScopeHook;
};
function RouteData() {
this.set = function(index, value) {
settings[index] = value;
};
this.get = function(index) {
if(settings.hasOwnProperty(index)) {
return settings[index];
} else {
console.log('RouteData: Attempt to access a propery that has not been set');
}
};
this.isHookedToRootSope = function() {
return hookToRootScope;
};
}
this.$get = function() {
return new RouteData();
};
}).
run(['$location', '$rootScope', 'RouteData', function($location, $rootScope, RouteData) {
if(RouteData.isHookedToRootSope()) {
$rootScope.RouteData = RouteData;
}
$rootScope.$on('$routeChangeStart', function(event, current, previous) {
var route = current.$$route;
if(typeof(route) !== 'undefined' && typeof(route['RouteData']) !== 'undefined') {
var data = route['RouteData'];
for(var index in data)
RouteData.set(index, data[index]);
}
});
}]);
The script below shows how to use the RouteData Module above via injecting the RouteDataProvider in the configuration level and apply default configurations such as the bodyStyle via RouteDataProvider.applyConfig(), you may also add more settings before the application is fully running. Hook it up in the $rootScope by setting RouteDataProvider.hookToRootScope() to true. Lastly, appending data, RouteData e.g.
RouteData: {
bodyStyle: {
'background-color': 'green'
}
}
to be sent in by the $routeProvider and processed by the run() method defined in the RouteData module which initializes the settings for the RouteData services to be accessed in the application.
script.js
angular.module('app', ['ngRoute', 'RouteData']).
config(['$routeProvider', 'RouteDataProvider', function($routeProvider, RouteDataProvider) {
RouteDataProvider.applyConfig({
bodyStyle: {
'background-color': 'white'
}
});
RouteDataProvider.hookToRootScope(true);
$routeProvider.when('/landing', {
RouteData: {
bodyStyle: {
'background-color': 'green'
}
},
templateUrl: 'landing.html',
controller: 'LandingController'
}).when('/login', {
RouteData: {
bodyStyle: {
'background-color': 'gray',
padding: '10px',
border: '5px solid black',
'border-radius': '1px solid black'
}
},
templateUrl: 'login.html',
controller: 'LoginController'
}).otherwise({
redirectTo: '/landing'
});
}]).
controller('LoginController', ['$scope', function($scope) {
}]).
controller('LandingController', ['$scope', function($scope) {
}]);
So the final piece of code to be added in your index page or any other page would be something like this.
A portion of index.html
<body ng-style="RouteData.get('bodyStyle')">
<a href="#/landing">Landing</a> |
<a href="#/login">Login</a>
<div ng-view></div>
</body>
这篇关于改变bodyj背景颜色与angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
