AngularJs: Chạy Chỉ thị sau khi Chế độ xem được hiển thị hoàn toàn

Question

Tôi là người mới đối với tất cả Thế giới Góc, và tôi đang gặp phải sự cố khi quản lý các chỉ thị.

Tôi đang làm việc trên một dự án sử dụng Tab và tôi muốn mở rộng chức năng của mình để xử lý các tab bị tràn khi kích thước cửa sổ hẹp hơn chiều rộng của tất cả các tab của tôi, vì vậy tôi cần tính toán một số yếu tố để đạt được điều này. Các tab được xây dựng từ một đối tượng trong phạm vi $, vấn đề là chỉ thị tính toán các tham số được chạy trước khi khung nhìn được biên dịch đầy đủ.

Plnkr Link:http://plnkr.co/edit/LOT4sZsNxnfmQ8zHymvw?p=preview

gì tôi đã cố gắng:

1. tải mẫu trong chỉ thị sử dụng templateUrl
2. làm việc với transclude
3. để sử dụng $ kéo dài trong ng -repeat
4. cố gắng sắp xếp lại chỉ thị và tạo một dum chỉ thị của tôi trong mỗi tab để kích hoạt sự kiện

Tôi nghĩ rằng có một số sự kiện AngularJs hoặc thuộc tính để xử lý tình huống này.

Xin vui lòng giúp đỡ các bạn :)

Answer 1

AngularJS dường như không có các cuộc gọi lại trả sau đáng tin cậy cho các chỉ thị được sử dụng trong ng-repeat. [1]

Có thể bạn có thể giải quyết vấn đề này trên cấp độ CSS bằng cách thêm phần tử điều khiển tràn "đáp ứng" cho chiều rộng màn hình cụ thể.

1. https://groups.google.com/forum/#!topic/angular/SCc45uVhTt8

Cập nhật: Có bây giờ là một cách để làm điều này bằng $ timeout lồng nhau. Xem: http://lorenzmerdian.blogspot.de/2013/03/how-to-handle-dom-updates-in-angularjs.html

Answer 2

Theo nhận xét của bạn, bạn đã có giải pháp hoạt động ... và hiện tại giải pháp duy nhất mà tôi biết: $ timeout.

Câu hỏi đặt ra là, bạn muốn đạt được điều gì? Bạn muốn gọi lại khi tất cả hiển thị được thực hiện. Ok, tốt, nhưng làm thế nào có thể góc biết điều này? Trong một ứng dụng hiện đại mà bạn dường như đang phát triển khi sử dụng góc cạnh, một lần xuất hiện lại có thể xảy ra mọi lúc! Sự kiện js có thể xảy ra khi dữ liệu được tải từ chương trình phụ trợ, ngay cả sau khi khởi chạy ứng dụng, dẫn đến kết xuất lại. Một chuyển động chuột của người dùng có thể kích hoạt kết xuất lại các phần tử, thậm chí nằm ngoài phạm vi góc nhìn vì các quy tắc CSS. Bất cứ lúc nào, một sự tái xuất hiện có thể xảy ra.

Vì vậy, với những cân nhắc này, angularJS có thể cho bạn biết điều gì khi kết xuất được thực hiện? Nó chỉ có thể cho bạn biết, khi chuỗi $ digest hiện hành và/hoặc $ được xử lý thì hàng đợi sự kiện trình duyệt hiện đang trống. Chính xác đó là thông tin duy nhất mà angularJS biết. Và bạn sử dụng $ timeout với độ trễ là 0 cho điều này.

Có, bạn đúng, trong một ứng dụng lớn hơn, có thể khó khăn đến mức không đáng tin cậy nữa. Nhưng trong trường hợp này, bạn nên suy nghĩ về cách bạn có thể giải quyết vấn đề này theo một cách khác. F.i. nếu một lần xuất hiện lại xảy ra sau đó, phải có nguyên nhân, như dữ liệu mới được tải từ chương trình phụ trợ.Nếu vậy, bạn biết khi nào dữ liệu được tải và do đó một lần xuất hiện lại xảy ra và do đó bạn biết chính xác khi nào bạn phải cập nhật chiều rộng của mình.

Answer 3

Bạn có thể thêm đồng hồ trên các phần tử DOM thực tế để biết thời điểm ng lặp lại được tải vào DOM.

Cho ul id của bạn, nói #tabs

$scope.$watch(
    function() { return document.getElementById('tabs').innerHTML }, 
    function(newval, oldval){ 
     //console.log(newval, oldval); 
     //do what you like 
    }, true); 

Answer 4

tôi thực hiện một chi nhánh trên plunker của bạn, II nghĩ rằng đây là những gì bạn đang tìm kiếm

tôi thay đổi chỉ thị của bạn để

này

.directive('onFinishRenderFilters', function ($timeout) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attr) { 
      if (scope.$last === true) { 
       $timeout(function() { 
        scope.$emit('ngRepeatFinished'); 
       }); 
      } 
     } 
    } 
}); 

Sau đó, trên HTML của bạn, tôi đã thêm chỉ thị

<li ng-repeat="tab in tabs" on-finish-render-filters> 

Và điều cuối cùng tôi đặt mã Tôi muốn chạy sau khi lặp lại kết thúc

$scope.$on('ngRepeatFinished', function (ngRepeatFinished) { 
     $scope.tabs = [{ 
      index: 1, 
      title: "Tab 1", 
      link: "/tab1/" 
     },{ 
      index: 2, 
      title: "Tab 2", 
      link: "/tab2/" 
     },{ 
      index: 3, 
      title: "Tab 3", 
      link: "/tab3/" 
     },{ 
      index: 4, 
      title: "Tab 4", 
      link: "/tab4/" 
     }]; 

    }); 

http://plnkr.co/edit/TGduPB8FV47QvjjLnFg2?p=preview