Question

我想在自定义指令的链接功能中获取父容器的ng-repeat子元素。我希望在 link 函数中传递的元素参数可以完成这项工作。像这样的东西

element.children() // gets all children elements

相反，我有文字节点 

这是我的指示元素：

<course-list courses="courses"></course-list>

这是指令实现

angular.module('pgCoursesList', [])
.directive('coursesList', [
    function() {
        return {
            restrict: 'E', 
            scope: {
                courses: '=',
                buttonText: '@'
            },
            template: '<div class="courseslist-container">' +
                    '<div ng-repeat="course in courses" class="media">' +
                        '<div class="media-left"><a class="img-thumb-64 blank-thumb-img" href="#">64x64</a></div>' +
                        '<div class="media-body clearfix">' +
                            '<h4 class="media-heading pull-left">{{course.name}}</h4>' +
                        '</div>' +
                        '<div class="media-left"><button btn-style="btn-success"></button></div>' +
                        '<hr />' +
                    '</div>' +
                '</div>',
            replace: true,
            link: function(scope, elem) {
                // elem.children()   
            }
        };
    }
]);

Answer 1

这是某种黑客行为，但你可以使用ng-init来做。我们可以通过检查$last内的ng-repeat来跟踪在DOM上呈现的最后一个元素。只需要在ng-repeat div中添加ng-init="$last && domRendered()"。

代码更改

template: '<div class="courseslist-container">' +
 '<div ng-repeat="course in courses" class="media">' +
 '<div class="media-left"><a class="img-thumb-64 blank-thumb-img" href="#" ng-init="$last && domRendered()">64x64</a></div>' +
  '<div class="media-body clearfix">' +
   '<h4 class="media-heading pull-left">{{course.name}}</h4>' +
  '</div>' +
  '<div class="media-left"><button btn-style="btn-success"></button></div>' +
  '<hr />' +
 '</div>' +
'</div>',
link: function(scope, element){
  scope.domRendered = function(){
     element.children(); //you can get element children here
  };
 }

或者更好的方法是尝试this链接。为此你需要再添加一个指令。

希望这可以帮到你。感谢。

在自定义指令的链接功能中访问已编译的ng-repeat子元素

1 个答案: