동적 선택기로 Angularjs 지시어 중첩 DOM 요소를 쿼리하는 방법은 무엇입니까? 상위 템플릿 내부

Question

지침 분배 :

<div badge></div> 

지침 템플릿 templates/badge.html : 동적 이드
공지 할당 지시자를 사용 $id.

<div> 
    <span id="id{{ ::$id }}_name">Nik Sumeiko, Frontend engineer</span> 
</div> 

지침 :

0 " 
    <div> 
     <span id="id{{ ::$id }}_name">Nik Sumeiko, Frontend engineer</span> 
    </div> 
" 

을하는 것이 가능하다 그렇다면 :이 지시어 템플릿이 아직 동적 값을 컴파일되지 않았 음을 명확하게 볼의 콘솔 출력을 바탕으로

angular.module('app').directive('badge',() => ({ 
    restrict: "A", 
    replace: true, 
    templateUrl: "templates/badge.html", 
    link: (scope, element, attributes) => { 

    // Tries to query nested DOM element by a dynamic selector. 
    const name = element.find(`#id${scope.$id}_name`); 

    console.log(name.length, element.html()); 
    } 
})); 

동적 선택기로 중첩 된 요소를 쿼리 하시겠습니까? 템플릿의 각도 렌더링 된 동적 값 뒤에 디스패치되는 다른 지시문 메서드가 있습니까?

... 나는 그것이 올바른 방법이라고 생각하지 않기 때문에, link 방법 내부 템플릿 렌더링을 지연 $timeout 주입 기능을 사용하려면 각 documentation에서 다음

Answer 1

인용 제안하지 마십시오 :

을

보기를 연결 한 후에 일반적으로 Angular로 자동 수행되는 $ digest를 호출 할 때까지 뷰가 업데이트되지 않습니다.

그 이유는 id에 표현식이 포함 된 요소를 찾을 수 없기 때문입니다. 그 시점에는보기가 업데이트되지 않습니다. 여기

해결 방법 :

요소를 생성하고 DOM에 부착 수동으로

당신이 그것을 쿼리 할 필요가 없습니다 당신이 요소에 대한 참조가이 방법 :

link: (scope, element, attributes) => { 
    let span = $compile('<span id="id{{ ::$id }}_name">Nik Sumeiko, Frontend engineer</span>')(scope); 
    // do something to span ... 
    element.append(span); 
} 

사용 $ 제한 시간

당신은 U 수 0 번째 지연이있는 $timeout인데 잘못된 방법은 아닙니다. $timeout은 현재 $digest주기 바로 다음에 코드를 실행합니다. 즉,보기 바인딩이 업데이트 된 후입니다.