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'); 
});