Как стиль CSS angular?

Предполагая, что у меня есть директива mydirect с шаблоном, который содержит много div с множеством вложенных классов. Например:

<div class="mydirect">
  <div class="classA">
    <div class="subclassA">
      <div class="subclassB">
      </div>
    <div class="classB"></div>
</div>

Я заметил, что, несмотря на наличие классных имен в файле css ( "mydirectstyle.css" ) и его включение в index.html, используя мою директиву:

angular.module("MyApp", []).
  directive('mydirect', function() {
    return {
      restrict: 'E',
      replace: true,
      template: '-All that Html here-'
    };
  });

Ни один из свойств CSS не применяется к нему вообще. Каков наилучший способ применить все мои стили к этим нескольким классам? Можно ли это сделать так, что мне не нужно вручную выбирать каждый элемент и устанавливать индивидуальные свойства CSS?

В моей странице index.html содержится <mydirect> </mydirect>, который заменяется шаблоном директивы, показанным выше.

Ответ 1

Его гораздо проще использовать фактические имена элементов для создания директив в вашей DOM, а не для использования метода класса. По двум причинам: 1) его гораздо более читаемый, чтобы иметь <mydirect> vs <div class="mydirect"> и 2), вы можете получить такую же легкость стиля, просто используя правильный синтаксис css.

Оставьте свою директиву так, как она есть, за исключением изменения ее на restrict: 'EA' (docs для этого здесь) и replace: false, как показано здесь:

.directive('mydirect', function() {
    return {
        restrict: 'EA',
        replace: false,
        template: '-All that Html here-'
    };
});

Вот параметры, которые вы теперь можете использовать и как настроить соответствующий CSS, чтобы получить нужные стили, как показано в этот jsbin

Надеюсь, что это поможет.

Ответ 2

Angular Директива с пользовательским CSS.

app.directive('bookslist', function() {

    return {
    	scope: true,
        templateUrl: 'templates/bookslist.html',
        restrict: "E",
        controller: function($scope){

        },
        link: function(scope, element, attributes){
        element.addClass('customClass');
      }

    }

});

.customClass table{
	!background: #ddd;

}
.customClass td{
	border: 1px solid #ddd;

}

Ответ 3

Я думаю, что решение этого просто. Но это только догадка. Вы определяете директиву, используя:

<div class="mydirect></div>

и в определении вашей директивы вы используете:

restrict: 'E'

Директива не отображается Angularjs, потому что Angularjs ищет что-то вроде:

<mydirect></mydirect>

Просто измените restrict: 'E' на restrict: 'C'.

Ответ 4

В соответствии с директивой google under и Angular директивы создания Ниже приведен пример описания объекта, устанавливающий два компонента конфигурации. Во-первых, установили опцию ограничения конфигурации. Опция ограничения используется для указания того, как можно вызывать директиву на странице.

Как мы видели ранее, существует четыре разных способа вызова директивы, поэтому существует четыре допустимых параметра для ограничения:

'A' - <span ng-sparkline></span> 
'E' - <ng-sparkline></ng-sparkline> 
'C' - <span class="ng-sparkline"></span> 
'M' - <!-- directive: ng-sparkline -->