AngularJS 访问指令模板内的 DOM 元素

Question

是否有一种更“有 Angular ”的方式在指令模板中选择 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>在我的模板中呈现的元素。有更好的方法吗？

Answer 1

我认为没有更“有 Angular 的方式”来选择元素。例如，请参阅 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]),
        // ...
    }
}