Question

我正在使用AngularJS和Modernizr来检测媒体查询并在每个窗口/视口调整大小时调用一个函数。我要做的是根据桌面或移动查询设置元素显示 - 某些元素应仅在移动设备上显示，其他元素仅在桌面上显示。

浏览器会在初始加载时检测元素显示/隐藏功能，但是我无法在浏览器调整大小时使用它。

控制器：

function MyCtrl($scope, Modernizr) {
    $scope.desktopOrMobile = function () {
        // mobile logic
        if (Modernizr.mq('(max-width: 991px)')) {
            // show only for mobile, hide desktop
            $scope.showD = false;
            $scope.showM = true;    
        };
        // desktop logic
        if (Modernizr.mq('(min-width: 992px)'))  {
            // show only for desktop, hide mobile
            $scope.showD = true;
            $scope.showM = false;
        };
    };
    $scope.desktopOrMobile();
}

调整大小的指令：

myApp.directive('resizeAction', ['$window', 'Modernizr', function($window, Modernizr) {
    return {
        restrict: 'A', // A = Attribute
        link: function($scope, element, attr) {
            angular.element($window)
            .bind('resize', function () {
                $scope.desktopOrMobile();
            });
        }
    };
}]);

为了向您展示我的详细信息，这里有一个小提琴 - http://jsfiddle.net/knele90/Lvc0u55v/12475/

任何帮助将不胜感激，tnx！

Answer 1

我认为您必须将事件发送到$ window对象

在'resizeAction'指令的链接函数中，你可以试试这个：

$window.addEventListener('resize', function () {
        $scope.desktopOrMobile();
 });

// Don't forget to destroy it
$scope.$on('$destroy', function () {
    $window.removeEventListener('resize');
});

AngularJS与Modernizr无法正常工作

1 个答案: