AngularJS与Modernizr不起作用

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

我认为你必须有事件到$窗口对象

在“resizeAction”指令你的链接功能，你可以试试这个：

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

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