我需要能够为不同的路线指定不同的布局，最理想的是我希望能够在路线配置中的对象中定义布局和其他参数，并让它们在路线更改时传播。
最佳答案
这是我在当前项目中解决该问题的方法。
可找到工作演示 here
如果您可以像这样在 $routeProvider.when(...) block 中定义对象会怎样:
路线定义:
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'MainCtrl',
resolve: {
interceptor: interceptWith('routeChangeInterceptor', {
stateClass: {
fullWidthLayout: true
}
})
}
});
并让它们传播并使用它来使用像这样的 stateClass 对象添加具有 ng-class 接口(interface)的类？
HTML:
<body state-class="{'full-width-layout': fullWidthLayout}"> ... </body>
<div class="some-class" state-class="{'some-class': someValue}"> ... </div>
如何:
这是使用一个 interceptWith(...) 帮助器，它简单地注入(inject)一个服务并使用给定的参数调用它，但它也可以使用这样的数组表示法来实现
interceptor: ['serviceToInject', function(injectedService) { .. }];
只有这样才更干燥。有关更多信息，请参阅演示。
用于广播路由定义中的对象的服务:
//This interceptor is responsible for emiting an event on rootScope
.factory('routeChangeInterceptor', ['$rootScope', function($rootScope) {
var _prepare = function(state) {
$rootScope.$broadcast('data:broadcast-state', state);
};
return {
prepare: _prepare
};
}]);
用于根据广播状态事件对象添加/删除类的指令如下所示:
//This directive receives and $parses object/classname mappings,
//and it will add or remove the defined class for every mapping that is defined.
angular.module('broadcastState')
.directive('stateClass', ['$parse', function ($parse) {
var _linkFn = function link(scope, element, attrs) {
scope.$on('data:broadcast-state', function(e, state) {
//Set defaults
state = state || {};
state.stateClass = state.stateClass || {};
var classes = $parse(attrs.stateClass)(state.stateClass);
angular.forEach(classes,function(value,className) {
if(value && typeof value === 'boolean')
{
element.addClass(className);
}
else
{
element.removeClass(className);
}
});
});
}
return {
restrict: 'A',
link: _linkFn
};
}]);
查看plnkr阅读更多内容。
关于angularjs - 如何在 Angular JS 中轻松实现多种布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15795768/