css - Ionic CSS 类分配

Question

我正在设计我的应用程序。熟悉基本的主题组件、SASS 等……但有一点很突出但没有意义的是为什么当我在运行的应用程序中预览源代码时添加了很多额外的 CSS 类。我是我的情况，我只是想更改菜单标题背景。在我的 app.html 文件中；

<ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
</ion-header>

转化为；

    <ion-header class="header header-md">
        <ion-toolbar class="toolbar toolbar-md">
<div class="toolbar-background toolbar-background-md" ng-reflect-klass="toolbar-background" ng-reflect-ng-class="toolbar-background-md"></div><div class="toolbar-content toolbar-content-md" ng-reflect-klass="toolbar-content" ng-reflect-ng-class="toolbar-content-md">
          <ion-title class="title title-md"><div class="toolbar-title toolbar-title-md" ng-reflect-klass="toolbar-title" ng-reflect-ng-class="toolbar-title-md">Menu</div></ion-title>
        </div></ion-toolbar>
      </ion-header>

我看到似乎有一种将“ion-element”转换为“element element-md”的模式。但是对于诸如“ion-toolbar”之类的元素来说有点奇怪，因为它添加了一个 div

<div class="toolbar-background toolbar-background-md" ng-reflect-klass="toolbar-background" ng-reflect-ng-class="toolbar-background-md"> 

我想了解这个翻译过程对我来说是如何工作的我想创建一些整洁的 CSS，因为它对我来说看起来有点笨拙!

Answer 1

ion-header 是一个 Angular Directive(指令)(ion-toolbar 也是)。指令可以有关联的 HTML 模板和 javascript。额外的类由属于每个指令的 javascript 添加。下面的代码演示了一个 Angular Directive(指令)，其中将一个类添加到原始元素。如果您检查结果，您还可以看到添加了一个额外的 div - 这是将指令模板添加到 DOM 的结果。

(function() {
  var app = angular.module("soDemo", []);
  app.directive("soDirective", SoDirective);

  function SoDirective() {
    var directive = {
      restrict: 'E',
      scope: {},
      link: link,
      template: '<div class="content">My directive contents</div>'
    };
    return directive;
    ///////////////////
    function link(scope, element) {
      element.addClass('sample-class');
      
      console.log(element.html());
    }
  }
})();

.sample-class {
  display: block;
  border: 1px solid red;
}

.content {
  font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="sample" ng-app="soDemo">
  <so-directive></so-directive>
</div>