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