Question

我是AngularJS的初学者，我有一点问题，我安装了grunt-contrib-less来支持更少的文件而不是css但现在我必须声明所有更少的样式，只能编译成一个css文件。

但我的问题通常是当我使用较少时，我会为特定页面编写一些代码，在这里我必须为所有页面编写样式代码。这是令人困惑的，并不是真正的可维护的，所以有一个组织较少风格的最佳做法吗？

我认为可能存在多种解决方案：

将一个类应用于body标签并更改它我不知道是什么（控制器，服务或其他）（Import LESS file only for one page）
根据编译的样式生成多个css文件（但我不能这样做，因为我无法正确配置grunt）
使用DOM操作执行此操作（但它没有找到它美丽，因为我认为Angular必须有一个很好的方法来解决这个问题）

你能解释一下如何为不同的视图设置不同的风格吗？我不希望所有视图中的所有链接都具有相同的样式，如果没有创建数百个类，我不知道该怎么做。

Answer 1

使用指令

并添加您要添加的任何变量/代码/逻辑

样式的HTML模板（指令）可以添加到您的视图中，在编译之后，您将获得所有视图的不同ui

供参考阅读

angular directive

Answer 2

我通过根据路线在body标签上添加特定类来解决我的问题。我把一个变量放在rootScope中，名为＆＃39; pageStyle＆＃39;与我想要的类名对应。当路线改变时，该变量自动更新（参见运行功能）。路线更改时会发生一个事件（$ stateChangeSuccess或$ routeChangeSuccess，具体取决于您是使用ngRoute还是-angularui-routeur）。

在我的情况下，我想添加路线的名称，但您可以使用控制器名称或其他内容。

以下是

的示例

这是路线：

angular
  .module('frontApp', [])
  .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider, $mdThemingProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: '../views/home.html',
        controller: function ($scope) {
          $scope.msg = 'Xavier';
        }
      })
      .state('form', {
        url: '/form',
        templateUrl: '../views/form.html',
        controller: 'FormCtrl'
      });
  }])

在run函数中，您将看到事件绑定以在路由更改时调整类：

  .run(function($rootScope) {
    $rootScope.pageStyle = '';
    // Watch state and set controller name in pageStyle variable when state change
    $rootScope.$on('$stateChangeSuccess', function(event, toState) {
      event.preventDefault();
      if (toState && toState.name && typeof toState.name === 'string'){
        $rootScope.pageStyle = toState.name;
      } else {
        $rootScope.pageStyle = '';
      }
    });
  });

额外信息：

请注意，如果使用ngroute，则路由更改时调用的事件会有所不同。使用＆＃34; $ routeChangeSuccess＆＃34;如果你使用ngRoute和＆＃34; $ stateChangeSuccess＆＃34;如果你选择使用angular-ui-routeur

如果您想添加控制器名称而不是路由名称，只需使用以下内容并替换＆＃39; ctrl＆＃39;与你的控制器后缀：

if (toState && toState.controller && typeof toState.controller !== 'function'){
    $rootScope.pageStyle = toState.controller.toLowerCase().replace('ctrl','');
}

希望它可以帮助别人

（AngularJS）整个网站只有少一个文件

2 个答案: