Angular 지시어 템플릿에 조건부로 데이터 속성 추가

Angular 지시어 템플릿에 조건부로 데이터 속성 추가

지시를 위한 템플릿을 만들고 있습니다.스코프의 속성이 true로 설정되어 있는 경우,data-toggle="dropdown"를 요소에 추가해야 합니다.변수가 false일 경우 이 데이터 속성은 요소의 속성으로 렌더링되지 않습니다.

예를 들어 스코프 변수가 true인 경우 템플릿은 다음을 렌더링해야 합니다.

<span data-toggle="dropdown"></span>

false일 경우 템플릿은 다음을 렌더링합니다.

<span></span>

이를 실현하기 위한 템플릿은 어떤 모양입니까?

---

예를 들어, 나는 내가 그것을 사용할 수 있다는 것을 안다.ng-class조건부로 클래스를 포함합니다.템플릿을 렌더링하려면 다음 작업을 수행합니다.

<span class="dropdown"></span>

그러면 템플릿은 다음과 같습니다.

"<span ng-class="{ 'dropdown': isDropDown }"></span>

If scope 변수isDropDown이false그러면 템플릿은 다음과 같이 렌더링됩니다.

<span></span>

템플릿에는 조건부로 추가되는 방법이 있습니다.class="dropdown". 조건부로 추가할 수 있는 템플릿 구문이 있나요?data-toggle="dropdown"?

---

템플릿에 대해 시도한 것 중 하나는 다음과 같습니다.

"<span data-toggle="{ 'dropdown': isDropDown }"></span>

위의 템플릿에 대한 내 생각은 스코프 변수가isDropDown그 가치는 사실입니다.data-toggle"syslog"로 설정됩니다.한다면isDropDownfalse입니다.그러면 값은data-toggle단순히 빈 문자열일 뿐이다.""근데 그게 잘 안 되는 것 같아.

제 생각엔 좋은 방법은ng-attr-그 다음에 평가할 식을 선택합니다.고객의 경우 다음과 같습니다.

<span ng-attr-data-toggle="{{ isValueTrue ? 'toggle' : 'notToggle' }}"></span>

예를 들면, 이 있습니다.

<span ng-attr-data-toggle="{{isTrue && 'dropdown' || undefined }}"></span>

는 is True=true일 때 생성됩니다.<span data-toggle="dropdown"></span>

is True=false일 경우:<span></span>

현재 Atribute를 조건부로 삭제 또는 추가할 수 있는 각도 지시어는 없습니다.ng-switch는 스팬 내에서 실행할 수 있습니다.하나는 그 Attribut이 있고 다른 하나는 그 Attribute가 있습니다.

<div ng-switch on="condition">
<span data-toggle="dropdown" ng-switch-when="value"></span>
<span ng-switch-default></span>
</div>

또는

<span data-toggle="dropdown" ng-if="expression"></span>
<span ng-if="!expression"></span>

같은 목적을 위한 지시문을 작성할 수도 있지만(조건부로 애트리뷰트를 추가/삭제할 수도 있습니다) 좀 더 복잡합니다.

또한 지시문 내의 스코프 변수를 관리하는 경우에도 다른 속성으로 전달할 수 있습니다.

예:

<span data-toggle="dropdown" when="isDropDown"></span>

언급URL : https://stackoverflow.com/questions/22049824/conditionally-adding-data-attribute-in-angular-directive-template