Anruffunktion auf Resize und unter Last mit einer Winkel Richtlinie

Question

Ich bin eine Richtlinie mit einer Funktion in meinem Controller rufen, wenn ein div der Größe verändert erhalten:

VIEW

<div id="tables-container" data-tap-disabled="true" on-size-changed="changeSize"></div> 

RICHTLINIE

app.directive('onSizeChanged', ['$window', '$timeout', function ($window, $timeout) { 
    return { 
     restrict: 'A', 
     scope: { 
      onSizeChanged: '&' 
     }, 
     link: function (scope, $element, attr) { 
      var element = $element[0]; 

      cacheElementSize(scope, element); 
      $window.addEventListener('resize', onWindowResize); 

      function cacheElementSize(scope, element) { 
       scope.cachedElementWidth = element.offsetWidth; 
       scope.cachedElementHeight = element.offsetHeight; 
      } 

      function onWindowResize() { 
       var isSizeChanged = scope.cachedElementWidth != element.offsetWidth || scope.cachedElementHeight != element.offsetHeight; 
       if (isSizeChanged) { 
        var expression = scope.onSizeChanged(); 
        $timeout(function() { 
         expression(element.offsetWidth, element.offsetHeight); 
        }, 500); 

       } 
      } 
     } 
    } 
}]); 

CONTROLLER

$scope.changeSize = function(w, h) { 
    //DO SOMETHING WITH w AND h... 
}; 

arbeitet Dieser große onResize. Die Sache, die mich verwirrt, ist Wie kann ich die auf Größe geänderte Funktion zu Mittag essen, wenn die Seite geladen wird (onReady)?

Answer 1

können Sie eine Richtlinie erstellen und sie auf Ihrem oberste Element anbringen, wo Sie ng-App-Richtlinie anhängen, dass Link-Funktion der Richtlinie können Sie -Ereignis, die durch Ihre Richtlinie angewendet, indem alle Handler zugehört wird.

app.directive('ngReady', function(){ 
    return { 
    restrict : 'A', 
    link : function() { 
     window.dispatchEvent(new Event('resize'));  
    } 
    } 
}); 

oder Sie können Ihre Richtlinie ändern und dies unter Code hinzufügen

$element.ready(function(){ 
    scope.$apply(function(){ 
     onWindowResize(); 
    }) 
}) 

Ich habe eine funktionierende Demo HERE Hope it :)

helfen