Question

当div调整大小时，我使用指令调用控制器中的函数：

查看

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

指令

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...
};

这对onResize很有用。让我感到困惑的是当页面加载时（onReady）我怎样才能在大小改变的函数中吃午饭？

Answer 1

您可以创建一个指令并将其附加到您附加ng-app指令的最顶层元素上。在该指令的链接函数中，您可以调度将由您的指令应用的所有处理程序监听的事件。

SELECT id
FROM (SELECT * FROM swg WHERE status != 0 AND dateswg <= TIMESTAMPADD(DAY,(6-WEEKDAY('2015-12-28')),'2015-12-28') ORDER BY id_units, id desc) x
GROUP BY id_units;

或者您可以修改您的指令并将其添加到代码

下面

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

我创建了一个有效的演示HERE 希望它会有所帮助：）

使用angular指令在调整大小和加载时调用函数

1 个答案: