angular-media-queries

2018-08-18 admin

angular-media-queries是什么

什么是angular-media-queries,Angular service to test if a given @media statment is true.

angular-media-queries介绍、angular-media-queries使用

` tag.

<script type='text/javascript' src='/static/path/to/angular.min.js'></script>
<script type='text/javascript' src='/static/path/to/angular-media-queries/match-media.js'></script>

Usage

Require the matchMedia module as a dependency in your app:

angular.module('myApp', ['matchMedia'])

In a Controller

Get

Use the service’s get method to get the name of the currently matching media query rule.

angular.module('myApp', ['matchMedia'])
.controller('mainController', ['screenSize', function (screenSize) {
  console.log('Your screen size at the moment matches the "'+screenSize.get()+'" media query rule.');
}]);

Is

Use the service’s is method to determine if the screensize matches the given string/array.

angular.module('myApp', ['matchMedia'])
.controller('mainController', ['screenSize', function (screenSize) {
  var data = complicatedChartData;

  //Determine to either perform cpu/network-intensive actions(desktop) or retrieve a small static image(mobile). 
  if (screenSize.is('xs, sm')) {
    // it's a mobile device so fetch a small image
    $http.post('/imageGenerator', data)
    .success(function (response) {
      document.querySelector('.chart').src = response.chartUrl;
    });
  }
  else {
    // it's a desktop size so do the complicated calculations and render that
    document.querySelector('.chart')
    .appendCanvas()
    .parseData()
    .renderCrazyChart();
  }
}]);

On

The callback fed to .on will execute on every window resize and takes the truthiness of the media query as its first argument. Be careful using this method as resize events fire often and can bog down your application if not handled properly.

  • Executes the callback function on window resize with the match truthiness as the first argument.
  • Returns the current match truthiness.
  • Passing $scope as a third parameter is optional, when not passed it will use $rootScope
angular.module('myApp', ['matchMedia'])
.controller('mainController', ['screenSize', function (screenSize) {
  $scope.isMobile = screenSize.on('xs, sm', function(isMatch){
    $scope.isMobile = isMatch;
  });
}]);

When

If you only want the callback to fire while in the correct screensize, use the when method. Be careful using this method as resize events fire often and can bog down your application if not handled properly.

angular.module('myApp', ['matchMedia'])
.controller('mainController', ['screenSize', function (screenSize) {

    // Will fire as long as the screen is size between 768px and 991px
    screenSize.when('sm', function() {
        console.log('Your screen size at the moment is between 768px and 991px.');
    });
}]);

OnChange

The callback fed to .onChange will execute only when a window resize causes the media query to begin matching or to stop matching, and takes the truthiness of the media query as its first argument. Be careful using this method as resize events fire often and can bog down your application if not handled properly.

  • Executes the callback function ONLY when the true/false state of the match differs from previous state.
  • Returns the current match truthiness.
  • The ‘scope’ parameter is required for cleanup reasons (destroy event).
angular.module('myApp', ['matchMedia'])
.controller('mainController', ['$scope', 'screenSize', function ($scope, screenSize) {
  $scope.isMobile = screenSize.onChange($scope, 'xs, sm', function(isMatch){
    $scope.isMobile = isMatch;
  });
}]);

OnRuleChange

The callback fed to .onRuleChange will execute only when a window resize causes the matching media query rule to change, and takes the name of the matched rule as its first argument. Depending on your needs, using this method can be more efficient than registering multiple .onChange handlers. Be careful using this method as resize events fire often and can bog down your application if not handled properly.

  • Executes the callback function ONLY when the name of the matched rule differs from previous matched rule.
  • Returns the current rule name.
  • The ‘scope’ parameter is required for cleanup reasons (destroy event).
angular.module('myApp', ['matchMedia'])
.controller('mainController', ['$scope', 'screenSize', function ($scope, screenSize) {
  $scope.screenSizeName = screenSize.onRuleChange($scope, function(ruleName){
    switch (ruleName) {
      case 'xs':
        // do something special
        break;
      case 'sm':
        // do something else special
        break;
      default:
        // do general logic
        break;
    }
  });
}]);

isRetina

This will return a boolean to indicate if the current screen is hi-def/retina.

angular.module('myApp', ['matchMedia'])
.controller('mainController', ['screenSize', function (screenSize) {
  $scope.isRetina = screenSize.isRetina;
}]);

Filter

Operate on string values with the filter: Have the placeholder sign % replaced by the actual media query rule name.

Example:

    <div> {{'Your screen size is: ' | media }} "</div>

Example with replace:

    <div ng-include="'/views/_partials/_team_%.html' | media:{ replace: '%' }"></div>

Extended example:

    <div ng-include="'/views/_partials/_team_%.html' | media:{ replace: '%', groups: { mobile:['ti','xs','sm'], desktop:['md','lg'] } }"></div>

ngIf Example

In your controller you can create variables that correspond to screen sizes. For example add the following to your controller:

// Using static method `is`
angular.module('myApp', ['matchMedia'])
.controller('mainController', ['screenSize', function (screenSize) {
  $scope.desktop = screenSize.is('md, lg');
  $scope.mobile = screenSize.is('xs, sm');
}]);

// Using dynamic method `on`, which will set the variables initially and then update the variable on window resize
$scope.desktop = screenSize.on('md, lg', function(match){
    $scope.desktop = match;
});
$scope.mobile = screenSize.on('xs, sm', function(match){
    $scope.mobile = match;
});

Then in your HTML you can show or hide content using ngIf or similar directives that take an Angular expression:


本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-38307.html

文章标题:angular-media-queries

回到顶部