각도 지시문을 사용하여 클래스 추가 및 요소 표시/추가

Question

특정 입력이 완료되면 행을 강조 표시하고 경고 기호를 표시하려는 테이블이 있습니다. 나는 이것에 대한 지시를했다.

<tr ng-repeat="size in resource.sizes" check-diameter size="size"> 
<td><i class="fa fa-warning"></i>{{size.title}}</td> 
<td>{{size.inner}}</td> 
<td>{{size.outer}}</td> 
</tr> 

.directive('checkDiameter', function() { 
    return { 
     restrict: 'A', 
     scope: { 
     size: '=' 
     }, 
     link: function(scope, element, attrs){ 
     scope.$watch('size', function(){ 
      if(scope.size.inner > scope.size.outer){ 
      element.addClass('warning'); 
      } 
     }, true); 

     } 
    }; 

이제는 행을 강조 표시합니다. 그러나 경고 기호 <i class="fa fa-warning"></i>을 표시/추가하라는 지침을 어떻게 작성합니까?

일반적으로 ng-hide를 사용 하겠지만 몇 가지보기에 컨트롤러를 사용하고 있으므로 모듈 식으로 유지하려면 지시문에 모든 것을 넣어야합니다.

Answer 1

원하는 요소에 클래스를 추가하려면 ng-class를 사용해야합니다. 동일한 조건에 따라 요소를 숨기려면 css를 사용해야합니다.

HTML :

<tr ng-repeat="size in resource.sizes" ng-class="{warning: size.inner > size.outer}"> 
<td><i class="fa fa-warning warning-message"></i>{{size.title}}</td> 
<td>{{size.inner}}</td> 
<td>{{size.outer}}</td> 
</tr> 

JS : 당신의 CSS에서

.directive('checkDiameter', function() { 
    return { 
     restrict: 'A', 
     scope: { 
     size: '=' 
     }, 
     link: function(scope, element, attrs){ 
     scope.$watch('size', function(){ 
      if(scope.size.inner > scope.size.outer){ 
      element.addClass('warning'); 
      } 
     }, true); 

     } 
    }; 

:

이

.warning-message { 
    display: none; 
} 
.warning .warning-message { 
display: block; 
}