AngularJS: Liên kết đến các phần tử trong một chỉ thị sử dụng ng-repeat

Question

Tôi có một chỉ thị đơn giản trong đó mẫu sử dụng ng-lặp lại bên trong nó. Tôi cần chạy một số mã để khởi tạo một thành phần jquery đối với một số phần tử được tạo bởi lệnh ng-repeat. Vấn đề là nếu tôi đặt mã này trong hàm liên kết. Các ng-lặp lại đã không xây dựng những yếu tố nào được nêu ra vì vậy không có gì là 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'}); 
    } 
    }; 
} 

Mẫu sẽ trông giống như sau. Tôi đang cố gắng đính kèm

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

Tôi đã thử sử dụng $ watch() và $ observ() để đăng ký gọi lại khi miền thay đổi và khởi tạo mã công cụ sau đó. Tuy nhiên, tôi dường như không thể gọi cho tôi vào đúng thời điểm. Bất kỳ ý tưởng những gì tôi đang mất tích?

Answer 1

Tôi phát hiện ra rằng nếu tạo một chỉ thị khác mà tôi đã thêm vào phần tử trong đó ng-repeat được tạo, nó sẽ được thông báo cho từng phần tử lặp lại được tạo ra. Sau đó, tôi có thể chỉ đơn giản là $ phát ra một sự kiện mà chỉ thị cha mẹ có thể lắng nghe. Tại thời điểm đó nó có thể thực hiện liên kết với các yếu tố lặp đi lặp lại ở đó. Điều này làm việc khá độc đáo đặc biệt là cho nhiều ng-lặp lại trong dom vì tôi có thể tách chúng bằng loại sự kiện của họ mà sẽ được chuyển cho chỉ thị mới.

Dưới đây là chỉ thị của tôi:

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

Đây là việc sử dụng mà chỉ mới trong mẫu:

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

Sau đó, bên trong chỉ thị mẹ tôi có thể làm như sau:

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

Answer 2

$watch sẽ có thể đạt được những gì bạn muốn làm:

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

tôi đã tạo ra một plunk để chứng minh giải pháp này.

Answer 3

Tôi nghĩ rằng điều này là do lỗi góc. Bạn có thể thấy điều này here

Một workaround là để loại bỏ các mẫu url và sử dụng mẫu trong chỉ thị riêng của mình hoặc sử dụng $ templateCache.get ('/ app/partials/my_directive.html')

này làm việc cho tôi :)

Answer 4

$watch sẽ hoạt động trong ngữ cảnh này. hãy thử nó

Answer 5

Tôi chỉ gặp vấn đề chính xác này và tìm thấy những gì tôi tin là một giải pháp tốt hơn. Về cơ bản, bạn có thể sử dụng $timeout để xếp hàng tác vụ sau khi các ng-repeat có kết xuất xong.

Lưu ý: điều này không có nghĩa là bạn đang thực sự sử dụng bộ hẹn giờ hoặc bất kỳ loại thời gian trễ nào; nó chỉ là một cách đơn giản để nối thêm một hàm vào cuối vòng lặp $digest.

Dưới đây là trích đoạn mã của tôi.Chỉ thị sử dụng ng-repeat để hiển thị các tab, do đó, tôi phải đợi cho đến khi nó được hiển thị để chạy phương thức tabSelected() của chúng tôi, thêm lớp active vào phần tử 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); 
    } 
} 

Tôi tìm thấy giải pháp từ http://blog.brunoscopelliti.com/run-a-directive-after-the-dom-has-finished-rendering trong đó có một live demo cho thấy nó trong hành động.

Từ chia tay: Nếu bạn đang thử nghiệm mã của mình (như bạn nên) với Karma, bạn sẽ cần gọi $timeout.flush() trong thử nghiệm của mình để đảm bảo rằng nó chạy.

tôi lên vết thương phải chạy sau trong thử nghiệm của tôi để làm cho nó hoạt động đúng:

// 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(); 
}