AngularJS доступ к элементам DOM внутри шаблона директивы

Question

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, чтобы получить доступ к DOM <ul> элемент, отображаемый в моем шаблоне. Есть ли лучший способ сделать это?

541 3

angularjs angularjs-directive

3 ответов:

Comments

Ничего не найдено.

CodeSalad · Accepted Answer · 2013-08-06 23:43:28

вы можете написать директиву для этого, которая просто назначает элемент (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-функция, которую вы, скорее всего, используете в любом случае

ngScopeElement использует a preLink-функция, так что директивы, вложенные в элемент, имеющий ng-scope-element уже можно получить доступ scope.list

не уверен, как это ведет себя с точки зрения производительности

Blackhole · Accepted Answer · 2015-10-07 23:22:25

Я не думаю, что есть более "угловой путь", чтобы выбрать элемент. Смотрите, например, как они достигают этой цели в последнем примере эта старая страница документации:
{
     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]),
        // ...
    }
}

Gerardo Camacho · Accepted Answer · 2016-06-02 21:09:33

этот ответ немного поздно, но я просто был в подобной необходимости.

наблюдая за комментариями, написанными @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.

надеюсь, что это помогает.