为了消除样式，数据，内容等方面的动态变化，通常很实际的做法是创建另一个包含接口（自定义提供程序）的角度模块，该接口可让您在配置级别之前和之后访问这些更改。这是一个小插曲，可以提供我下面将要讨论的内容的观点。
为此，我创建了一个带有
providerRouteData 的小模块（route-data.js），该模块公开了两个功能配置：
applyConfig()-分配要在RouteData服务中访问的设置。
hookToRootScope()-将RouteData服务挂接在其中，
$rootScope从而使它可用于所有要创建的子作用域和整个应用程序。
RouteData提供程序具有一项
RouteData()服务，该服务提供对方法的访问，这些方法用于设置和获取
RouteData将在
$routeProvider配置中提供的设置。
（如果您不熟悉提供者和服务，请在此处了解更多信息）
（如果您不熟悉
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: 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服务的设置。
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) {}]);因此，要添加到索引页面或任何其他页面中的最后一段代码将是这样的。
一部分
index.html
<body ng-> <a href="#/landing">Landing</a> | <a href="#/login">Login</a> <div ng-view></div></body>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）