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>

범위 변수 isDropDown가 false이면 템플릿은 간단히 렌더링됩니다.

<span></span>

따라서 템플릿에 class="dropdown". 조건부로 추가 할 수있는 템플릿 구문이 data-toggle="dropdown"있습니까?

---

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

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

위의 템플릿에 대한 내 생각은 범위 변수 isDropDown가 참이면의 값이 data-toggle"드롭 다운"으로 설정된다는 것입니다. 경우 isDropDown거짓, 다음의 값은 data-toggle단순히 빈 문자열이 될 것이다 "". 그래도 작동하지 않는 것 같습니다.

---

ng-attr-평가하고 싶은 표현 을 사용하는 것이 좋은 방법이라고 생각합니다 . 귀하의 경우에는 다음과 같습니다.

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

여기 fiddle에 예제가 있습니다.

---

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

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

그리고 isTrue = false 일 때 : <span></span>

---

현재로서는 조건부로 속성을 제거하거나 추가 할 수있는 각도 지시문이 없습니다. 하나는 해당 속성이 있고 다른 하나는 속성이없는 범위에서 ng-switch를 수행 할 수 있습니다.

<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