Làm thế nào tôi có thể chạy một lệnh sau khi dom hoàn thành kết xuất?

Tôi đã có một vấn đề có vẻ đơn giản mà không có giải pháp rõ ràng (bằng cách đọc tài liệu Angular JS) .

Tôi đã nhận được một lệnh Angular JS thực hiện một số tính toán dựa trên chiều cao của các phần tử DOM khác để xác định chiều cao của vùng chứa trong DOM.

Một cái gì đó tương tự như thế này đang diễn ra bên trong chỉ thị:

return function(scope, element, attrs) {
    $('.main').height( $('.site-header').height() -  $('.site-footer').height() );
}

Vấn đề là khi lệnh chạy $('site-header')không thể tìm thấy, trả về một mảng trống thay vì phần tử DOM được bao bọc bởi jQuery mà tôi cần.

Có một cuộc gọi lại mà tôi có thể sử dụng trong chỉ thị của mình chỉ chạy sau khi DOM đã được tải và tôi có thể truy cập các phần tử DOM khác thông qua các truy vấn kiểu chọn jQuery thông thường không?

Nó phụ thuộc vào cách $ ('tiêu đề trang web') của bạn được xây dựng.

Bạn có thể thử sử dụng $ timeout với độ trễ 0. Cái gì đó như:

return function(scope, element, attrs) {
    $timeout(function(){
        $('.main').height( $('.site-header').height() -  $('.site-footer').height() );
    });        
}

Giải thích cách thức hoạt động: một , hai .

Đừng quên tiêm $timeouttrong chỉ thị của bạn:

.directive('sticky', function($timeout)

Đây là cách tôi làm điều đó:

app.directive('example', function() {

    return function(scope, element, attrs) {
        angular.element(document).ready(function() {
                //MANIPULATE THE DOM
        });
    };

});

Có lẽ tác giả sẽ không cần câu trả lời của tôi nữa. Tuy nhiên, để hoàn thiện tôi cảm thấy những người dùng khác có thể thấy nó hữu ích. Giải pháp tốt nhất và đơn giản nhất là sử dụng $(window).load()bên trong cơ thể của hàm trả về. (ngoài ra bạn có thể sử dụng document.ready. Nó thực sự phụ thuộc vào việc bạn có cần tất cả các hình ảnh hay không).

Sử dụng $timeouttheo ý kiến ​​khiêm tốn của tôi là một lựa chọn rất yếu và có thể thất bại trong một số trường hợp.

Đây là mã hoàn chỉnh tôi sẽ sử dụng:

.directive('directiveExample', function(){
   return {
       restrict: 'A',
       link: function($scope, $elem, attrs){

           $(window).load(function() {
               //...JS here...
           });
       }
   }
});

Có một ngcontentloadedsự kiện, tôi nghĩ bạn có thể sử dụng nó

.directive('directiveExample', function(){
   return {
       restrict: 'A',
       link: function(scope, elem, attrs){

                $$window = $ $window


                init = function(){
                    contentHeight = elem.outerHeight()
                    //do the things
                }

                $$window.on('ngcontentloaded',init)

       }
   }
});

Nếu bạn không thể sử dụng $ timeout do tài nguyên bên ngoài và không thể sử dụng một lệnh do vấn đề cụ thể với thời gian, hãy sử dụng phát sóng.

Thêm $scope.$broadcast("variable_name_here");sau khi tài nguyên bên ngoài mong muốn hoặc bộ điều khiển / chỉ thị chạy dài đã hoàn thành.

Sau đó thêm vào bên dưới sau khi tài nguyên bên ngoài của bạn đã được tải.

$scope.$on("variable_name_here", function(){ 
   // DOM manipulation here
   jQuery('selector').height(); 
}

Ví dụ như trong lời hứa về yêu cầu HTTP hoãn lại.

MyHttpService.then(function(data){
   $scope.MyHttpReturnedImage = data.image;
   $scope.$broadcast("imageLoaded");
});

$scope.$on("imageLoaded", function(){ 
   jQuery('img').height(80).width(80); 
}

Tôi đã có một vấn đề tương tự và muốn chia sẻ giải pháp của tôi ở đây.

Tôi có HTML sau:

<div data-my-directive>
  <div id='sub' ng-include='includedFile.htm'></div>
</div>

Vấn đề: Trong chức năng liên kết của chỉ thị của div cha, tôi muốn jquery'ing div div # sub. Nhưng nó chỉ cho tôi một đối tượng trống vì ng-gộp chưa hoàn thành khi chức năng liên kết của lệnh được chạy. Vì vậy, trước tiên tôi đã thực hiện một cách giải quyết bẩn với $ timeout, hoạt động nhưng tham số độ trễ phụ thuộc vào tốc độ máy khách (không ai thích điều đó).

Hoạt động nhưng bẩn:

app.directive('myDirective', [function () {
    var directive = {};
    directive.link = function (scope, element, attrs) {
        $timeout(function() {
            //very dirty cause of client-depending varying delay time 
            $('#sub').css(/*whatever*/);
        }, 350);
    };
    return directive;
}]);

Đây là giải pháp sạch:

app.directive('myDirective', [function () {
    var directive = {};
    directive.link = function (scope, element, attrs) {
        scope.$on('$includeContentLoaded', function() {
            //just happens in the moment when ng-included finished
            $('#sub').css(/*whatever*/);
        };
    };
    return directive;
}]);

Có lẽ nó giúp được ai đó.