AngularJS:链接到使用 ng-repeat 的指令中的元素 [英] AngularJS: Linking to elements in a directive that uses ng-repeat

问题描述

我有一个简单的指令，其中模板在其中使用了 ng-repeat.我需要运行一些代码来针对 ng-repeat 指令创建的一些元素实例化 jquery 组件.问题是，如果我把这段代码放在链接函数中.ng-repeat 还没有构建这些元素，所以没有实例化.

App.directive('myDirective', ['$compile', '$timeout', function($compile, $timeout) {返回 {范围: {域:'='},templateUrl: '/app/partials/my_directive.html',链接:函数($scope，元素，属性){element.find('.standard-help').tooltip('destroy');element.find('.standard-help').tooltip({placement: 'top', trigger: 'click hover focus'});}};}

模板如下所示.我正在尝试附加

<li class="media" style="position:relative;"ng-repeat="域中的域"><a class="domainHeader" href="javascript://"><span class="domainHeader">{{domain.tag}}</span></a><div class="media-body" style="margin-left: 52px;"><ul class="standardsList"><li ng-class="{standardDisplayed: courseLayout == 'standards' }" ng-hide="standard.lessons.length == 0" ng-repeat="standard in domain.standards"><a href="javascript://" title="{{standard.description}}" ng-show="lessonLayout == 'standards'" class="standard-help pull-right"><i class="图标-问题-标志"></i></a><h6 ng-show="lessonLayout == 'standards'">{{standard.tag}}</h6><ul class="lessonsList"><li ng-class="{课程:真实}" ng-repeat="标准课程中的课程" ng-click="onLessonSelected(课程)"><i class="icon-lock 课程锁定"></i><div>{{lesson.title}}</div>

我尝试使用 $watch() 和 $observe() 在域更改时注册回调，然后实例化工具提示代码.但是，我似乎无法让它在正确的时间给我打电话.知道我缺少什么吗?

解决方案

我发现，如果创建了另一个指令，并将其添加到正在创建 ng-repeat 的元素中，那么对于重复创建的每个元素，它都会收到通知.然后我可以简单地 $emit 一个父指令可以监听的事件.此时它可以执行到那里重复元素的链接.这非常有效，特别是对于 dom 中的多个 ng-repeat，因为我可以通过将它们传递给新指令的事件类型将它们分开.

这是我的指令:

App.directive("onRepeatDone", function() {返回 {限制:'A'，链接:函数($scope，元素，属性){$scope.$emit(attributes["onRepeatDone"] || "repeat_done", element);}}});

这是模板中新指令的用法:

<li on-repeat-done="domain_done" ng-repeat="域中的域">...</li>

然后在父指令中我可以执行以下操作:

link: function( $scope, element, attributes ) {$scope.$on('domain_done', function( domainElement ) {domainElement.find('.someElementInsideARepeatedElement').click(...);});}

I have a simple directive where the template uses ng-repeat inside it. I need to run some code to instantiate a jquery component against some of the elements created by the ng-repeat directive. The problem is that if I put this code in the link function. The ng-repeat hasn't built those elements yet so nothing is instantiated.

App.directive('myDirective', ['$compile', '$timeout', function($compile, $timeout) {
  return {
    scope: {
        domains: '='
    },
    templateUrl: '/app/partials/my_directive.html',
    link: function($scope, element, attributes) {
        element.find('.standard-help').tooltip('destroy');
        element.find('.standard-help').tooltip({placement: 'top', trigger: 'click hover focus'});
    }
  };
}

The template would look like the following. I'm trying to attach

<ul class="media-list domainList">
  <li class="media" style="position:relative;" ng-repeat="domain in domains">
    <a class="domainHeader" href="javascript://">
        <span class="domainHeader">{{domain.tag}}</span>
    </a>
    <div class="media-body" style="margin-left: 52px;">
        <ul class="standardsList">
            <li ng-class="{ standardDisplayed: lessonLayout == 'standards' }" ng-hide="standard.lessons.length == 0" ng-repeat="standard in domain.standards">
                <a href="javascript://" title="{{standard.description}}" ng-show="lessonLayout == 'standards'" class="standard-help pull-right"><i class="icon-question-sign"></i></a>
                <h6 ng-show="lessonLayout == 'standards'">{{standard.tag}}</h6>
                <ul class="lessonsList">
                    <li ng-class="{ lesson: true }" ng-repeat="lesson in standard.lessons" ng-click="onLessonSelected(lesson)">
                        <i class="icon-lock lesson-locked"></i>
                        <div>{{lesson.title}}</div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
  </li>
</ul>

I've tried using $watch() and $observe() to register a callback when the domains change and instantiate the tooltip code then. However, I can't seem to get it to call me at the right time. Any ideas what I'm missing?

解决方案

I found that if created another directive that I added to the element where the ng-repeat was being created it would be notified for each element the repeat created. Then I could simply $emit an event that the parent directive could listen for. At which point it could perform the linking to the repeated elements there. This worked quite nicely especially for multiple ng-repeats within the dom because I could separate them by their event type which would be passed to the new directive.

Here is my directive:

App.directive("onRepeatDone", function() {
    return {
        restrict: 'A',
        link: function($scope, element, attributes ) {
            $scope.$emit(attributes["onRepeatDone"] || "repeat_done", element);
        }
    }
});

Here is the usage of that new directive in the template:

<ul>
    <li on-repeat-done="domain_done" ng-repeat="domain in domains">...</li>
</ul>

Then inside the parent directive I could do the following:

link: function( $scope, element, attributes ) {
    $scope.$on('domain_done', function( domainElement ) {
        domainElement.find('.someElementInsideARepeatedElement').click(...);
    } );
}

这篇关于AngularJS:链接到使用 ng-repeat 的指令中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！