Question

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

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'});
    }
  };
}

模板如下所示。我正试着附上

<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>

我尝试使用$ watch（）和$ observe（）在域更改时注册回调，然后实例化工具提示代码。但是，我似乎无法在合适的时间给我打电话。我缺少什么想法？

Answer 1

我发现如果创建了另一个指令，我将其添加到创建ng-repeat的元素中，则会通知重复创建的每个元素。然后我可以简单地$发出一个父指令可以监听的事件。此时它可以执行与那里重复元素的链接。这非常适用于dom中的多个ng-repeats，因为我可以通过它们传递给新指令的事件类型来区分它们。

这是我的指示：

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

以下是模板中新指令的用法：

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

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

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

Answer 2

$watch应该能够实现您想要的目标：

link: function(scope, elem, attrs) {
    var init = function() {
        // your initialization code
    };
    var ulElem = elem.children()[0]; // ul element

    var unreg = scope.$watch(function() {
        return ulElem.children.length === scope.domains.length; // check if all "li" are generated
    }, function() {
        // at this point, the ul is rendered
        init();
        unreg(); // unregister the watcher for performance, since the init function only need to be called once
    });
}

我创建了一个plunk来演示此解决方案。

Answer 3

我刚刚遇到了这个问题并发现了我认为更好的解决方案。基本上，您可以在$timeout完成渲染后使用ng-repeat对任务进行排队。

注意： 这并不意味着您实际上正在使用计时器或任何时间延迟;这只是将函数附加到$digest循环末尾的简单方法。

以下是我的代码的摘录。该指令使用ng-repeat来显示选项卡，因此，我必须等到它被渲染后才能运行我的tabSelected()方法，该方法将active类添加到HTML元素。

link($scope:ng.IScope, element:JQuery, attributes:ng.IAttributes):void {
  if (this.autoActivateFirstTab && this.tabs && this.tabs.length > 0) {
    var self = this;

    var selectFirstTab = function() {
      self.tabSelected(self.tabs[0]);
    };

    // Add a $timeout task to the end of the $digest loop to select the
    // first tab after the loop finishes
    self.$timeout(selectFirstTab, 0);
  }
}

我找到了来自http://blog.brunoscopelliti.com/run-a-directive-after-the-dom-has-finished-rendering的解决方案，其中live demo显示了该解决方案。

分词：如果您正在使用Karma测试代码（就像您应该这样），则需要在测试中调用$timeout.flush()以确保其运行。

我必须在我的测试中运行以下内容才能使其正常工作：

// Re-digest to ensure we see the changes
scope.$digest();

// Flush any pending $timeout tasks to ensure we see changes
try {
  this.$timeout.verifyNoPendingTasks();
} catch ( aException ) {
  this.$timeout.flush();
}

Answer 4

我认为这是因为有角度的错误。你可以看到这个here

一种解决方法是删除模板网址并在指令本身中使用模板或使用$ templateCache.get（＆＃39; /app/partials/my_directive.html'）

这对我有用：）

Answer 5

$watch应该在这种情况下工作。试试吧

AngularJS：链接到使用ng-repeat的指令中的元素

5 个答案: