9

我需要能够为不同的路线指定不同的布局，最好我希望能够在路线配置中的对象中定义布局和其他参数，并让它们在路线更改时传播。

4

3 回答 3

9

这是我在当前项目中解决它的方法。

可在此处找到工作演示


如果您可以$routeProvider.when(...)像这样在块中定义对象会怎样：

路线定义： 

  $routeProvider

    .when('/', {
      templateUrl: 'main.html',
      controller: 'MainCtrl',
      resolve: {
        interceptor: interceptWith('routeChangeInterceptor', {

          stateClass: {
            fullWidthLayout: true
          }

        })
      }
    });


并让它们传播并使用它来添加具有ng-class类似接口的类，使用这样的 stateClass 对象？

HTML：

<body state-class="{'full-width-layout': fullWidthLayout}"> ... </body>

<div class="some-class" state-class="{'some-class': someValue}"> ... </div>



如何：

这是使用一个interceptWith(...)简单地注入服务并使用给定参数调用它的助手，但它也可以使用像这样的数组表示法来实现

interceptor: ['serviceToInject', function(injectedService) { .. }];

只有这样它是 DRYer。有关此的更多信息，请参阅演示。


用于从路由定义中广播对象的服务：

//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以了解更多信息。

于 2013-04-03T19:00:42.543 回答
4

看起来Angular 团队的https://github.com/angular-ui/ui-router是最好的方法。

于 2014-04-01T19:41:14.443 回答
0

试试这个http://angular-route-segment.com/（AngularJS $route 服务的轻量级扩展，支持树状嵌套视图和路由，以及高级流处理）

于 2016-06-11T09:53:15.527 回答