범위의 부울 변수를 기반으로 요소에 예를 들어 “contenteditable”을 추가 할 수 있어야합니다.
사용 예 :
<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>$scope.editMode로 설정된 경우 contenteditable = true가 요소에 추가 됩니다 true. 이 ng-class와 같은 속성 동작을 구현하는 쉬운 방법이 있습니까? 지침을 작성하고 공유하지 않을 경우 공유하는 것을 고려하고 있습니다.
편집 :
제안 된 attrs 지시문과 ng-bind-attrs 사이에 약간의 유사성이있는 것으로 보이지만 1.0.0.rc3 에서 제거 된 이유는 무엇입니까?
답변
ng-class를 사용할 수없는 경우 (예 : SVG 스타일링) 클래스 attr을 조건부로 설정하려면 다음을 사용하고 있습니다.
ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"다른 속성 유형에도 동일한 접근 방식이 적용됩니다.
(ng-attr-를 사용하려면 최신 불안정한 각도에 있어야한다고 생각합니다. 현재 1.1.4입니다.)
답변
ng-attrAngular 표현식을 평가하기 위해 속성을 접두어로 사용할 수 있습니다 . 표현식의 결과가 정의되지 않으면 속성에서 값이 제거됩니다.
<a ng-attr-href="{{value || undefined}}">Hello World</a>생산할 것 (가치가 거짓 인 경우)
<a ng-attr-href="{{value || undefined}}" href>Hello World</a>따라서 false“false”라는 단어가 값으로 생성되므로 사용하지 마십시오 .
<a ng-attr-href="{{value || false}}" href="false">Hello World</a>지시문에서이 트릭을 사용할 때. 지시문의 속성에 값이 없으면 false입니다.
예를 들어 위의 내용은 거짓입니다.
function post($scope, $el, $attr) {
var url = $attr['href'] || false;
alert(url === false);
}
답변
속성을 열심히 설정 하여이 작업을 수행했습니다. 속성의 부울 값을 사용하여 속성 적용 가능성을 제어합니다.
다음은 코드 스 니펫입니다.
<div contenteditable="{{ condition ? 'true' : 'false'}}"></div>이게 도움이 되길 바란다.
답변
최신 버전의 Angular (1.1.5)에는이라는 조건부 지시문이 포함되어 있습니다 ngIf. 요소가 숨겨져 있지 않지만 DOM에 전혀 포함되지 않는다는 점 ngShow과 다릅니다 ngHide. 비용이 많이 들지만 사용되지 않는 구성 요소에 매우 유용합니다.
<h1 ng-if="editMode" contenteditable=true>{{content.title}}</h1>답변
부울 검사를 기반으로 특정 값을 표시하도록 속성을 가져 오거나 부울 검사가 실패한 경우 완전히 생략하려면 다음을 사용했습니다.
ng-attr-example="{{params.type == 'test' ? 'itWasTest' : undefined }}"
사용법 예 :
<div ng-attr-class="{{params.type == 'test' ? 'itWasTest' : undefined }}">
겠습니까 출력 <div class="itWasTest">또는 <div>값에 따라params.type
답변
<h1 ng-attr-contenteditable="{{isTrue || undefined }}">{{content.title}}</h1>
isTrue = true 일 때 생성됩니다.
<h1 contenteditable="true">{{content.title}}</h1>
isTrue = false 일 때 :
<h1>{{content.title}}</h1>
답변
허용 된 솔루션 인 Ashley Davis가 게시 한 솔루션에 대해 설명 된 방법은 할당 된 값이 정의되지 않았다는 사실에 관계없이 DOM에 속성을 인쇄합니다.
예를 들어, ng-model과 value 속성이 모두있는 입력 필드 설정에서 :
<input type="text" name="myInput" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />myValue의 배후에 관계없이 value 속성은 여전히 DOM에 인쇄되어 해석됩니다. 그러면 Ng 모델이 재정의됩니다.
약간 불쾌하지만 ng-if를 사용하면 트릭이 수행됩니다.
<input type="text" name="myInput" data-ng-if="value" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />
<input type="text" name="myInput" data-ng-if="!value" data-ng-model="myModel" />ng-if 지시문 내에서 더 자세한 검사를 사용하는 것이 좋습니다. 🙂
