如何检测设备使用AngularJS [英] How to device detector use AngularJS

问题描述

我建立使用离子型框架移动网站。我想与AngularJS（或离子）。

来检测移动设备（Android和iOS）

如果接入设备的是Android→＃/安卓
如果接入设备的iOS→＃/ IOS

controllers.js

 函数uaCtrl（'$范围，$位置'，（$范围，$位置）{
$范围=功能（）{
  VAR isMobile = {
    安卓：功能（）{
      返回navigator.userAgent.match（/ Android版/ I）;
    }，
    iOS版：功能（）{
      返回navigator.userAgent.match（/ iPhone | iPad的|的iPod / I）
    }
  }  如果（isMobile.Android（））{
    $ location.path（'＃/ Android的）;
  }否则如果（isMobile.iOS（））{
    $ location.path（'＃/ IOS'）;
  }其他{
    $ location.path（'＃/ IOS'）;
  }};
 

};

app.js

 的.config（函数（$ stateProvider，$ urlRouterProvider）{
  $ urlRouterProvider.otherwise（'/破折号'）;  $ stateProvider  .STATE（'家'，{
      网址：'/横线'，
      templateUrl：'模板/ dash.html
    }）  .STATE（Android的家，{
    网址：'/ Android的，
    templateUrl：'模板/ DASH-android.html
  }）  .STATE（的iOS入户'，{
    网址：'/ IOS，
    templateUrl：'模板/ DASH-ios.html
  }）
}）;
 

dash.html

 ＆LT;离子视图捉迷藏导航栏=真正的NG-控制器=uaCtrl＆GT;
    ?????
＆LT; /离子视图＆gt;
 

解决方案

ionic.Platform.isIOS（）我相信是你在找什么。

平台文档：
http://ionicframework.com/docs/api/utility/ionic.Platform/

这是单元测试：
的https://github.com/driftyco/ionic/blob/master/test/unit/angular/service/platform.unit.js

不过，我不会建议使用不同的标记结构，如果你不就得了。相反，如果你有根据平台的不同风格，离子地方平台的Andr​​oid 或平台IOS 在体内标签类，所以你可以做这样的事情：

.platform-H1的Andr​​oid {颜色：绿色; }

I am building a mobile site using the ionic framework. I want to detect mobile devices(Android and iOS) with AngularJS (or ionic).

If access device is Android → #/android if access device is iOS → #/ios

controllers.js

function uaCtrl('$scope', '$location', ($scope, $location) {
$scope = function () {
  var isMobile = {
    Android: function() {
      return navigator.userAgent.match(/Android/i);
    },
    iOS: function() {
      return navigator.userAgent.match(/iPhone | iPad | iPod/i)
    }
  }

  if(isMobile.Android()) {
    $location.path('#/android');
  }else if(isMobile.iOS()) {
    $location.path('#/ios');
  }else{
    $location.path('#/ios');
  }

};

};

app.js

.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/dash');

  $stateProvider

  .state('home', {
      url: '/dash',
      templateUrl: 'templates/dash.html'
    })

  .state('android-home', {
    url: '/android',
    templateUrl:'templates/dash-android.html'
  })

  .state('ios-home', {
    url: '/ios',
    templateUrl:'templates/dash-ios.html'
  })
});

dash.html

<ion-view hide-nav-bar="true" ng-controller="uaCtrl">
    ?????
</ion-view>

解决方案

ionic.Platform.isIOS() I believe is what you're looking for.

Platform docs: http://ionicframework.com/docs/api/utility/ionic.Platform/

It's unit tests: https://github.com/driftyco/ionic/blob/master/test/unit/angular/service/platform.unit.js

However, I wouldn't recommend using different markup structures if you don't have to. Instead, if you have different styles depending on the platform, Ionic places platform-android or platform-ios in the body tag class, so you could do things like:

.platform-android h1 { color: green; }

这篇关于如何检测设备使用AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！