CSS 스타일 각진 방법JS 지시?

CSS 스타일 각진 방법JS 지시?

중첩된 클래스가 많은 디브가 많이 포함된 템플릿이 포함된 지시문 "mydirect"가 있다고 가정합니다.예를 들어,

<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 페이지는 a를 포함합니다.<mydirect> </mydirect>위에 표시된 지시 템플릿으로 대체됩니다.

클래스 메서드를 사용하는 것보다 실제 요소 이름을 사용하여 DOM에서 지시어를 만드는 것이 훨씬 쉽습니다.두 가지 이유 때문에: 1) 그것은 훨씬 더 읽기 쉽습니다.<mydirect>대<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에 나와 있습니다.

도움이 되길 바랍니다.

사용자 지정 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;

}

아래의 google 및 각 지시 생성 로직 아래의 설명 객체에서 두 개의 구성 요소를 설정합니다.먼저, 설정 제한 옵션을 설정합니다.제한 옵션은 페이지에서 지시어를 호출할 수 있는 방법을 지정하는 데 사용됩니다.

앞에서 본 바와 같이 명령어를 호출하는 방법은 네 가지가 있으므로 제한에는 네 가지 유효한 옵션이 있습니다.

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

이에 대한 해결책은 간단하다고 생각합니다.하지만 그건 추측일 뿐입니다.다음을 사용하여 지시문을 정의합니다.

<div class="mydirect></div>

그리고 지시적 정의에서 사용하는 것은 다음과 같습니다.

restrict: 'E'

Angularjs가 다음과 같은 것을 찾고 있기 때문에 Angularjs에 의해 지시가 렌더링되지 않습니다.

<mydirect></mydirect>

단순변경restrict: 'E'로.restrict: 'C'.

언급URL : https://stackoverflow.com/questions/19577027/how-to-css-style-angularjs-directive