지시어 템플릿 안의 DOM 요소에 액세스하는 AngularJS

Question

지시어 템플릿 내에서 DOM 요소를 선택하는 "각도가 더 넓은"방법이 있습니까? 예를 들어,이 지침이 있다고 :

app.directive("myDirective", function() { 
    return { 
     template: '<div><ul><li ng-repeat="item in items"></ul></div>', 
     link: function(scope, element, attrs) { 
      var list = element.find("ul"); 
     } 
    } 
}); 

나는 내 템플릿에 렌더링 된 DOM <ul> 요소의 보류를 얻을 수있는 jQuery를 스타일 선택기를 사용했다. 이 작업을 수행하는 더 좋은 방법이 있습니까?

Answer 1

속성이 주신 이름.

app.directive("ngScopeElement", function() { 
    var directiveDefinitionObject = { 

    restrict: "A", 

    compile: function compile(tElement, tAttrs, transclude) { 
     return { 
      pre: function preLink(scope, iElement, iAttrs, controller) { 
      scope[iAttrs.ngScopeElement] = iElement; 
      } 
     }; 
    } 
    }; 

    return directiveDefinitionObject; 
}); 

사용법 :

app.directive("myDirective", function() { 
    return { 
     template: '<div><ul ng-scope-element="list"><li ng-repeat="item in items"></ul></div>', 
     link: function(scope, element, attrs) { 
      scope.list[0] // scope.list is the jqlite element, 
          // scope.list[0] is the native dom element 
     } 
    } 
}); 

일부 발언 : 여기

이 지침 인해에

• compile and link order for nested directives 만 myDirective의 POSTLINK-기능에서 scope.list에 액세스 할 수 있습니다, 당신은 어쨌든 사용 가능성이 매우 높습니다.
• ngScopeElement는 지침이 성능이 많다는

Answer 2

요소를 선택하는 데 더 많은 "각도 방법"이 있다고 생각하지 않습니다. 예를 들어, 그들은 this old documentation page의 마지막 예제에서이 목표를 달성하는 방법을 참조하십시오

{ 
    template: '<div>' + 
    '<div class="title">{{title}}</div>' + 
    '<div class="body" ng-transclude></div>' + 
    '</div>', 

    link: function(scope, element, attrs) { 
     // Title element 
     var title = angular.element(element.children()[0]), 
     // ... 
    } 
} 

당신은 단순히 사용 범위에 (jqLite)의 요소를 할당 이것에 대한 지침을 작성할 수

Answer 3

이 답변 동작 늦게 조금 오는 방법 ng-scope-element 이미 scope.list

확실하지 액세스 할 수 있습니다 가지는 요소 내에 중첩되도록하는 preLink 기능을 사용하지만 그냥 비슷한 필요가 있었다.

질문에서 @ganaraj가 작성한 주석을 살펴 보았습니다. 템플릿의 ng-repeat li 태그에 추가 될 지시문 속성을 통해 클래스 이름을 전달하는 필요성이있는 사용 사례가 있습니다.

<my-directive class2add="special-class" /> 

얻을 다음 HTML :

예를 들어

,이 같은 지시어를 사용

<div> 
    <ul> 
     <li class="special-class">Item 1</li> 
     <li class="special-class">Item 2</li> 
    </ul> 
</div> 

솔루션을 발견 here은 templateUrl 적용, 다음과 같습니다

app.directive("myDirective", function() { 
    return { 
     template: function(element, attrs){ 
      return '<div><ul><li ng-repeat="item in items" class="'+attrs.class2add+'"></ul></div>'; 
     }, 
     link: function(scope, element, attrs) { 
      var list = element.find("ul"); 
     } 
    } 
}); 

AngularJS 1.4.9를 사용하여 성공적으로 시험해 보았습니다.

희망이 있습니다.