Question

我有一个我绑定的功能：

angular.module('app').directive('resizable', function($window) {
    return function(scope) {
        angular.element($window).bind('resize', function() {
            scope.$apply(function() {
                //console.log($window.innerWidth);
                scope.windowWidth = $window.innerWidth;
            });
        })
    }
});

但这并不会导致onload。我需要页面加载时的初始屏幕宽度。我如何使用Angular获得这个？

更新：

我也试过这个......

angular.module('ccsApp').directive('setSize',
    ['$document', function($document) {
        return {
            restrict: 'A',
            link: function($scope, elements, attrs) {
                $document.on("load", function() {
                    $scope.$apply(function () {
                        console.log('initial=');
                    });
                });
            }
        }}
    ]
);

Answer 1

此代码在指令中。因此，您可能不希望在加载应用程序时执行该函数，但仅在使用此指令时。因此，只需直接在指令函数中执行该函数：

angular.module('app').directive('resizable', function($window) {
    return function(scope) {
        // define the function
        var updateWindowWidth = function() {
            // console.log($window.innerWidth);
            scope.windowWidth = $window.innerWidth
        };

        // call it immediately to initialize the scope variable as soon as the directive is used
        updateWindowWidth();

        // and make sure it's called every time the window is resized
        angular.element($window).bind('resize', function() {
            scope.$apply(updateWindowWidth);
        });
    };
});

您可能还应确保在销毁指令时未绑定事件处理程序。否则，每次使用该指令时，都会向窗口添加一个额外的处理程序。

Answer 2

您可以将$ window注入模块的.run函数。虽然没有可用的范围。

目前还不清楚您尝试使用窗口大小做什么，因此我们提供有用答案的能力有限

使用Angular可以获得屏幕宽度的最早点是什么？

2 个答案: