使用 angularjs 更改正文背景颜色 [英] Changing body background color with angularjs
问题描述
我希望能够根据当前路径的内容更改 的背景颜色.
I want to be able to change the background color of <body> depending on what the current path is.
我尝试通过在更改路径时检查 $location.path() 然后使用 ng-style 指令来更改背景颜色来做到这一点，但这似乎是一个黑客(并且没有不工作).
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'};
}
});
}]);
推荐答案
为了解耦这种在样式、数据、内容等方面的动态变化，创建另一个包含接口的 angular 模块通常是可行的(自定义提供程序)这可以让您在配置级别之前和之后访问这些更改.这是一个 plunker 提供我将在下面讨论的内容的视图.
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.
对于这个答案，我创建了一个带有 provider 的小模块 (route-data.js)，RouteData，它公开两种功能配置:
For this answer, I have created a small module(route-data.js) with a provider, RouteData, which exposes
two function configurations:
applyConfig() - 分配要在 RouteData 服务中访问的设置.hookToRootScope() - 在 $rootScope 中挂钩 RouteData 服务，从而使其可用于要创建的所有子作用域和整个应用程序.
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.
RouteData 提供程序有一个 RouteData() 服务，该服务提供对设置和获取将在 $routeProvider 中提供的 RouteData 设置的方法的访问代码>配置.
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)
(如果您不熟悉 config() 和 run() 方法，您可以在 这里)
(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]);
}
});
}]);
下面的脚本显示了如何通过在配置级别注入 RouteDataProvider 来使用上面的 RouteData 模块，并通过 RouteDataProvider.applyConfig() 应用默认配置，例如 bodyStyle，您还可以在应用程序完全运行之前添加更多设置.通过将 RouteDataProvider.hookToRootScope() 设置为 true 将其连接到 $rootScope 中.最后，附加数据，RouteData 例如
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'
}
}
由 $routeProvider 发送并由 RouteData 模块中定义的 run() 方法处理，该方法初始化要在应用程序中访问的 RouteData 服务的设置.
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.
index.html
<body ng-style="RouteData.get('bodyStyle')">
<a href="#/landing">Landing</a> |
<a href="#/login">Login</a>
<div ng-view></div>
</body>
这篇关于使用 angularjs 更改正文背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
