Làm cách nào để kích hoạt thay đổi kích thước sự kiện trong AngularJS

Question

Tôi đang sử dụng Angular & Bootstrap, với điều khiển tab điều hướng để chuyển đổi chế độ hiển thị của div. Trong một div, tôi có một img lớn (bản vẽ CAD của tòa nhà). Tôi cũng sau đó đánh dấu lớp phủ trên hình ảnh. Tôi muốn chia tỷ lệ vị trí x/y của các điểm đánh dấu dựa trên chiều rộng hình ảnh & image naturalWidth. Tôi đang sử dụng một chỉ thị thay đổi kích thước để phát hiện các thay đổi và cập nhật phạm vi của tôi.

Vấn đề của tôi là nếu người dùng chuyển đổi tab và chuyển về div với CAD img, việc làm mới sẽ không xảy ra cho đến khi tôi đổi kích thước trình duyệt (hoặc đáng ngạc nhiên nếu tôi nhấn phím CMD trên máy Mac).

Có cách nào góc cạnh để kích hoạt sự kiện thay đổi kích thước để buộc các điểm đánh dấu của tôi được tính toán lại hay không. Hoặc là có một sự kiện tôi có thể gõ vào đó là bắn khi được hiển thị đầy đủ?

Hoặc có cách tiếp cận góc cạnh tinh tế hơn tôi nên dùng không?

Đây là HTML, chỉ thị thay đổi kích thước mà tôi đã viết nằm trên thẻ.

<div id="imageDiv" style="position: relative;" ng-show="selectedLocation" > 
    <img ng-src="../maps/image/{{selectedLocation}}" 
     style=" max-width: 100%; max-height: auto; border:solid 1px black" resize imageonload /> 
</div> 

Và đây là chỉ thị thay đổi kích thước (chuyển thể từ http://jsfiddle.net/jaredwilli/SfJ8c/)

directive('resize', function($window) { 
    return function(scope, element) { 
    var w = angular.element($window); 

    scope.imgCadImage = element; 

    scope.getWindowDimensions = function() { 
     return { 
     'h' : scope.imgCadImage[0].width, 
     'w' : scope.imgCadImage[0].height 
     }; 
    }; 
    scope.$watch(scope.getWindowDimensions, function(newValue, oldValue) { 
     if (scope.imgCadImage[0].naturalWidth) 
     scope.imgScale = newValue.w/scope.imgCadImage[0].naturalWidth; 
     else 
     scope.imgScale = 1; 
     console.log("watched resize event - scale = "+scope.imgScale) 
     scope.updateCADMarkersAfterResize(); 
    }, true); 
    w.bind('resize', function() { 
     console.log("'resize' - scale = "+scope.imgScale) 
     scope.$apply(); 
    }); 
    }; 
}). 

Answer 1

Hãy thử tiêm $timeout vào resize chỉ:

directive('resize', function($window, $timeout) { 

... sau đó thêm các dòng sau vào dưới cùng của nó:

$timeout(function(){ w.triggerHandler('resize') }); 

Điều này sẽ kích hoạt trình xử lý bạn đã ràng buộc với $window.resize ngay sau khi trình duyệt hiển thị.

Answer 2

Câu trả lời được chấp nhận không hoạt động đối với tôi - w không được xác định.

này đã làm:

$timeout(function(){ 
    $(window).trigger('resize'); 
}); 

Answer 3

này đã làm việc cho tôi khi ở trên không.

$timeout(function() { 
    $window.dispatchEvent(new Event("resize")); 
}, 100); 

Tôi cũng phải sử dụng $timeout với sự chậm trễ trong trường hợp của mình để ngăn chặn lỗi về chu kỳ tiêu hóa đang được tiến hành. Không phải tất cả các trường hợp sử dụng đều có thể cần đến điều này.

dispatchEvent cũng được hỗ trợ http://caniuse.com/#feat=dispatchevent

Tuy nhiên, nó, bạn cần IE9 và IE10 hỗ trợ bạn sẽ phải sử dụng phương pháp propritary của họ: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/fireEvent