AngularJS가 디렉티브 템플릿 내부의 DOM 요소에 액세스

AngularJS가 디렉티브 템플릿 내부의 DOM 요소에 액세스

---

디렉티브 템플릿 내에서 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");
        }
    }
});

jQuery 스타일 선택기를 사용하여 <ul>템플릿에서 렌더링 된 DOM 요소 를 가져 왔습니다 . 이 작업을 수행하는 더 좋은 방법이 있습니까?

---

이에 대한 지시문을 작성할 수 있습니다.이 지시문은 속성이 부여한 이름을 사용하여 범위에 (jqLite) 요소를 할당하기 만하면됩니다.

다음은 지시문입니다.

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
        }
    }
});

일부 비고 :

• 때문에에 중첩 된 지침에 대한 컴파일 및 링크하기 위해 당신이 할 수있는 전용 액세스 scope.list에서 myDirective당신은 매우 가능성이 어쨌든 사용하는 POSTLINK - 기능,이야
• ngScopeElementpreLink 함수를 사용하므로 요소 내에 중첩 된 지시문 ng-scope-element이 이미 액세스 할 수 있습니다.scope.list
• 이것이 성능 측면에서 어떻게 작동하는지 확실하지 않습니다.

---

요소를 선택하는 더 "각진 방법"은 없다고 생각합니다. 예를 들어이 오래된 문서 페이지 의 마지막 예에서이 목표를 달성하는 방법을 참조하십시오 .

{
     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]),
        // ...
    }
}

---

이 대답은 조금 늦었지만 비슷한 필요가있었습니다.

질문에서 @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>

여기 에서 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로 성공적으로 시도했습니다.

도움이되기를 바랍니다.

참고URL : https://stackoverflow.com/questions/15881453/angularjs-accessing-dom-elements-inside-directive-template