특정 경우에만 요소를 바꾸기 위해 Angular 지시어를 구현하는 방법.

Question

앵커 요소를 div 요소로 바꾸는 지시문을 구현하려고하지만 특정 경우에만 수행하려고합니다. 앵커 요소의 내용은 대체되어서는 안되며 새 요소에 포함되어야합니다.

아이디어는 앵커 요소가 값이 교체되어야하는지 여부를 확인하기 위해 평가되어야하는 표현식 인 특성을 가질 수 있다는 것입니다.

는 foobar가 true 인 경우 :

<a ys-deactivate-anchor="{{ fooBar == true }}"><span>Hallo</span></a> 

는이되어야

<div ys-deactivate-anchor="{{ fooBar == true }}"><span>Hallo</span></div> 

내 지시어는 현재처럼 보이는 :

이 교체는 이제 기대 작품으로

commonModule.directive('ysDeactivateAnchor', function() { 
    return{ 
     restrict: 'A', 
     scope: false, 
     replace: true, 
     template: function (elme, attrs) { 
      return "<div ng-transclude></div>"; 
     }, 
     transclude: true 
    }; 
}); 

내가 찾고 있어요 표현식이 참일 때만 요소를 대체하는 방법입니다. 현재 나는 혼자서 전체 교체를하는 대신에 이것을 어떻게 할 지 모른다. 템플리트 함수를 사용하여 속성을 확인하려고했습니다. 문제는 템플릿 함수에서 표현식을 평가하는 데 사용할 수있는 범위가 아직 없기 때문에 정적 값만 가져올 수 있다는 것입니다.

물론 교체 및 전환 작업을 건너 뛸 수 있으며 연결 기능에서 교체 작업을 수행 할 수 있지만 어떻게 든이를 피할 수 있는지 궁금합니다.

Answer 1

나는이 지시어를 class으로 사용하고 조건에 따라 클래스를 활성화한다. 같은

뭔가 : 지시어

<a ng-class="{ 'ysDeactivateAnchor' : fooBar, '':! fooBar}"><span>Hallo</span></a> 

: 나는 현재 문제를 해결하고있어 어떻게 restrict: 'C'