使用angularjs更改主体背景颜色
我希望能够<body>
根据当前路径更改背景色。
我尝试通过每当路径更改时检查$ location.path()来执行此操作,然后使用ng-style
伪指令更改背景色,但这似乎很简单(并且不起作用)。
什么是实现这一目标的更分离的方法?
如果有人想看,这是我写的代码。
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'};
}
});
}]);
回答:
为了消除样式,数据,内容等方面的动态变化,通常很实际的做法是创建另一个包含接口(自定义提供程序)的角度模块,该接口可让您在配置级别之前和之后访问这些更改。这是一个小插曲,可以提供我下面将要讨论的内容的观点。
为此,我创建了一个带有provider
RouteData 的小模块(route-data.js),该模块公开了两个功能配置:
applyConfig()
-分配要在RouteData服务中访问的设置。
hookToRootScope()
-将RouteData服务挂接在其中,$rootScope
从而使它可用于所有要创建的子作用域和整个应用程序。
RouteData提供程序具有一项RouteData()
服务,该服务提供对方法的访问,这些方法用于设置和获取RouteData
将在$routeProvider
配置中提供的设置。
(如果您不熟悉提供者和服务,请在此处了解更多信息)
(如果您不熟悉config()
和run()
方法,可以在此处阅读更多内容)
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模块上方,并应用默认配置中,如脚本bodyStyle
通过RouteDataProvider.applyConfig()
,你还可以添加应用程序完全运行之前更多的设置。通过设置RouteDataProvider.hookToRootScope()
为true
将其挂接到$ rootScope中。最后,附加数据,RouteData
例如
RouteData: { bodyStyle: {
'background-color': 'green'
}
}
由$ routeProvider发送并由run()
RouteData模块中定义的方法处理,该方法初始化将在应用程序中访问的RouteData服务的设置。
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) {
}]);
因此,要添加到索引页面或任何其他页面中的最后一段代码将是这样的。
一部分 index.html
<body ng-style="RouteData.get('bodyStyle')"> <a href="#/landing">Landing</a> |
<a href="#/login">Login</a>
<div ng-view></div>
</body>
以上是 使用angularjs更改主体背景颜色 的全部内容, 来源链接: utcz.com/qa/429032.html