AngularJS: gọi lại sau khi kết xuất (làm việc với DOM sau khi kết xuất)

Question

Làm cách nào để chạy phương thức $scope.myWork() sau khi hiển thị mẫu? Tôi muốn thiết lập các $scope.value và sau đó tôi cần phải thay đổi một cái gì đó với JQuery (ví dụ như trong DOM của nội dung mẫu). $scope.$watch('value', function(){....}) đang hoạt động "trước khi" hiển thị (DOM của mẫu chưa có sẵn). Cảm ơn.

Answer 1

Tạo directive chạy mã của bạn trong hàm liên kết. Chức năng liên kết được gọi sau khi mẫu được tạo.

Xem ng-click để có ý tưởng.

Answer 2

tôi sử dụng terminal và transclude trong một chỉ thị thuộc tính để gọi một phương thức scoped sau một mô hình được cập nhật và xem là ra (trong trường hợp của tôi để thay đổi kích thước một iframe sau một $ Resource.query):

.directive('postRender', [ '$timeout', function($timeout) { 
var def = { 
    restrict : 'A', 
    terminal : true, 
    transclude : true, 
    link : function(scope, element, attrs) { 
     $timeout(scope.resize, 0); //Calling a scoped method 
    } 
}; 
return def; 
}]) 

Thời gian chờ $ là ma thuật đen. Nó nên có thể khai báo phương thức JS làm giá trị thuộc tính và phân tích cú pháp nó.

Vì vậy, tôi sử dụng nó trong một ng-repeat (trong trường hợp của tôi một cây được trả lại một cách đệ quy):

<div post-render ng-repeat="r in regions | orderBy:'name'" ng-include="'tree_region_renderer.html'"> 

Answer 3

Jens câu trả lời ở trên sẽ làm việc, nhưng lưu ý rằng trên AngularJS phiên bản mới hơn (ví dụ 1.2.3) bạn không thể có chỉ thị postRender đó kết hợp với ng-repeat như các thuộc tính trên cùng một thẻ vì cả hai đều có transclude: true. Trong trường hợp đó, bạn phải loại bỏ transclude hoặc có một thẻ riêng biệt với thuộc tính chỉ thị postRender.
Cũng cần lưu ý ưu tiên của các thuộc tính khi sử dụng thiết bị đầu cuối: true vì bạn có thể có thuộc tính không hiệu quả do thuộc tính được ưu tiên cao hơn trên cùng một thẻ.

Answer 4

Tôi cũng gặp phải vấn đề này, các giải pháp khác không hiệu quả đối với tôi, và dường như loại thước đo Thước đo phải được giải quyết. Một đánh giá nhanh chóng của Protractor's client-side scripts cho thấy nó sử dụng angular.getTestability(element) để biết khi nào thực sự chạy thử nghiệm. Phương thức chờ cho đến khi không có thời gian chờ hoặc yêu cầu http đang chờ xử lý và sau đó chạy cuộc gọi lại của bạn. Đây là chỉ thị của tôi:

export function afterRender ($timeout) { 
"ngInject"; 
    return { 
     restrict: 'A', 
     terminal: true, 
     link: function (scope, element, attrs) { 
     angular.getTestability(element).whenStable(function() { 
      console.log('[rendered]'); 
     }); 
     } 
    }; 
} 

Answer 5

Tôi tìm thấy trang này khi tìm cách tạo hồ sơ hiển thị DOM. Tôi tìm thấy một giải pháp đơn giản, rất hiệu quả trong trường hợp sử dụng của tôi.

Đính kèm trình xử lý ng-init vào phần tử DOM và trong hàm điều khiển, sử dụng $ timeout để thực hiện thực thi. Ví dụ:

HTML:

<div ng-init="foo()"> 

JS:

$scope.foo = function() { 
    $timeout(function() { 
     // This code runs after the DOM renders 
    }); 
});