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

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

디렉티브 템플릿 내에서 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 스타일 셀렉터를 사용하여 DOM을 입수했습니다.<ul>템플릿에 렌더링된 요소.더 좋은 방법이 있을까요?

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

{
     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) 요소를 스코프에 할당하기만 하면 됩니다.

지시사항은 다음과 같습니다.

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부터myDirectives postLink-Function (어쨌든 사용하고 있는 경우)
• ngScopeElementpreLink 기능을 사용하기 때문에 명령어는 다음과 같은 요소 내에 중첩됩니다.ng-scope-element이미 액세스 할 수 있다scope.list
• 이것이 어떻게 퍼포먼스에 적합하게 동작하는지 확실하지 않다

이 답변은 조금 늦었지만, 나는 단지 비슷한 도움이 필요했을 뿐이다.

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