Question

这是一个概念而非严格的技术问题。

我有以下index.html：

<div class="container"><div ng-view=""></div></div>

在我的app.js中，我有以下路线配置：

$routeProvider
            .when('/questions', {
                templateUrl: 'views/questions.html',
                controller: 'QuestionsCtrl'
            })
            .when('/result', {
                templateUrl: 'views/result.html',
                controller: 'ResultCtrl'
            })
            .otherwise({
                redirectTo: '/questions'
            });

这意味着，根据网址，<div ng-view="">中会加载不同的视图。现在，为了正确渲染这些视图，我需要在封闭的<div class="container">上设置样式属性（我在其中一个视图中使用Leaflet.js，因此我需要临时设置容器的宽度和高度100％，全屏地图）。

我如何才能做到最好，即＆＃34; Angular Way＆＃34;？我查看了$viewContentLoaded event of the ngView directive，但它没有＆＃39;似乎是正确的事情，因为它似乎只在相应的视图被完全加载时才被触发，而不是在视图的初始化时（因此地图，从一开始就需要一个正确设置样式的容器）。我应该使用body标签上定义的控制器吗？还是服务？我完全无能为力，想要做对。

Answer 1

使用侦听$routeChangeSuccess上的$rootScope的控制器。

<body ng-app="X" ng-controller="app">
    <div class="container" ng-class="containerClass">
        <div ng-view=""></div>
    </div>
</body>

angular.module('X').controller('app', function($rootScope, $route) {
  $rootScope.$on('$routeChangeSuccess', function(){
    $rootScope.containerClass = angular.lowercase(($route.current.controller || '').replace(/Ctrl$/, ''));
  });
});

根据当前视图更改封闭容器的属性

1 个答案: