angular-only-mobile

Welcome to angular-only-mobile repository.

Clone this repository:

$ git clone https://github.com/cyberdelphos/angular-only-mobile.git

If you're using the GitHub for Mac, simply sync this repository and you'll see the new branch.

Description

This repository contains the directive 'only-mobile' that works with AngularJS.

This directive makes it simple to show html elements in web browsers and mobile browsers using the same html page.

Usage

To use this directive you have to:

1. Add the 'onlyMobile' directive included in directives.js file directly to your directives folder/file.
2. Append the attribute 'only-mobile' to your html element
3. Set the value for visibility under mobile browsers:
   • Displayable ONLY in MOBILE browsers:

     < ... only-mobile="true" />

   • Displayable ONLY in NOT MOBILE browsers (desktop, laptops, tablets):

     < ... only-mobile="false" />

   • Displayable in BOTH types of browsers:

     Just don't append anything to your html element ;)

4. Try on your mobile and desktop browsers to see the respective elements appear/disappear in the same page!

Samples

Load this page in your phone and computer browsers to see this directive in action.

By taking a look at that rather simple page containing this directive in use you can notice the span shown only in mobile (I will be shown only in mobile), and the one only shown in pc browsers (I will be shown only in pc).

Author and Contributors

This directive is created by A. Carrasco (@cyberdelphos) and can be used under the MIT License.

The function used to check mobile browsers is the one created by detectmobilebrowsers.com, so the credit for mobile browser detection goes to them.