javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(): Add docs for ionicViewState, polish other docs

Browse Source
This commit is contained in:
Andy Joslin
2014-03-10 21:15:54 -06:00
parent dc22bd51b2
commit f9766fcf16
12 changed files with 201 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
js/ext/angular/src/controller/ionicScrollController.js vendored
View File

@@ -3,6 +3,9 @@
angular.module('ionic.ui.scroll')
/**
* @private
*/
.controller('$ionicScroll', ['$scope', 'scrollViewOptions', '$timeout', '$ionicScrollDelegate', '$window', function($scope, scrollViewOptions, $timeout, $ionicScrollDelegate, $window) {
var self = this;

27
js/ext/angular/src/directive/ionicContent.js vendored
View File

@@ -7,6 +7,14 @@ angular.module('ionic.ui.content', ['ionic.ui.service', 'ionic.ui.scroll'])
* Panel is a simple 100% width and height, fixed panel. It's meant for content to be
* added to it, or animated around.
*/
/**
* @ngdoc directive
* @name ionPane
* @module ionic
* @restrict E
*
* @description A simple container that fits content, with no side effects. Adds the 'pane' class to the element.
*/
.directive('ionPane', function() {
return {
restrict: 'E',
@@ -27,7 +35,7 @@ angular.module('ionic.ui.content', ['ionic.ui.service', 'ionic.ui.scroll'])
*
* While we recommend using the custom Scroll features in Ionic in most cases, sometimes (for performance reasons) only the browser's native overflow scrolling will suffice, and so we've made it easy to toggle between the Ionic scroll implementation and overflow scrolling.
*
* You can implement pull-to-refresh with the {@link ionic.directive:ionRefresher ionRefresher} directive, and infinite scrolling with the {@link ionic.directive:ionInfiniteScroll ionInfiniteScroll} directive.
* You can implement pull-to-refresh with the {@link ionic.directive:ionRefresher} directive, and infinite scrolling with the {@link ionic.directive:ionInfiniteScroll} directive.
*
* @restrict E
* @param {boolean=} scroll Whether to allow scrolling of content. Defaults to true.
@@ -190,15 +198,21 @@ function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
* @ngdoc directive
* @name ionInfiniteScroll
* @module ionic
* @parent ionContent, ionScroll
* @restrict E
*
* @description
* The ionInfiniteScroll directive, when placed inside of {@link ionic.directive:ionContent ionContent}, allows you to call a function whenever the user gets to the bottom of the page or near the bottom of the page.
* The ionInfiniteScroll directive, when placed inside of
* {@link ionic.directive:ionContent}, allows you to call a function whenever
* the user gets to the bottom of the page or near the bottom of the page.
*
* The expression you pass in for `on-infinite` is called when the user scrolls greater than `distance` away from the bottom of the content.
* The expression you pass in for `on-infinite` is called when the user scrolls
* greater than `distance` away from the bottom of the content.
*
* @param {expression} on-infinite What to call when the scroller reaches the bottom.
* @param {string=} distance The distance from the bottom that the scroll must reach to trigger the on-infinite expression. Default 1%.
* @param {expression} on-infinite What to call when the scroller reaches the
* bottom.
* @param {string=} distance The distance from the bottom that the scroll must
* reach to trigger the on-infinite expression. Default 1%.
*
* @usage
* ```html
@@ -221,7 +235,8 @@ function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
* }
* ```
*
* An easy to way to stop infinite scroll once there is no more data to load is to use angular's `ng-if` directive:
* An easy to way to stop infinite scroll once there is no more data to load
* is to use angular's `ng-if` directive:
*
* ```html
* <ion-infinite-scroll

4
js/ext/angular/src/directive/ionicList.js vendored
View File

@@ -152,7 +152,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
* list item requires the item class. Ionic also comes with pre-built Angular
* directives to make it easier to create a complex list.
*
* Using the ionList and {@link ionic.directive:ionItem ionItem} directives
* Using the ionList and {@link ionic.directive:ionItem} directives
* make it easy to support various interaction modes such as swipe to edit,
* drag to reorder, and removing items.
*
@@ -160,7 +160,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
* directives, but rather just use the classnames.
* This demo is a simple list without using the directives.
*
* See the {@link ionic.directive:ionItem ionItem documentation} for more information on list items.
* See the {@link ionic.directive:ionItem} documentation for more information on list items.
*
* @usage
* ```html

2
js/ext/angular/src/directive/ionicNavAnimation.js vendored
View File

@@ -7,7 +7,7 @@ angular.module('ionic.ui.navAnimation', [])
* @parent ionNavView
*
* @description
* When used under an {@link ionic.directive:ionNavView ionNavView} and on an `<a>` element,
* When used under an {@link ionic.directive:ionNavView} and on an `<a>` element,
* allows you to set the animation all clicks on that link within the navView use.
*
* @usage

2
js/ext/angular/src/directive/ionicRadio.js vendored
View File

@@ -120,7 +120,7 @@ angular.module('ionic.ui.radio', [])
$element.addClass('active');
}
});
ionic.on('tap', clickHandler, $element[0]);
$scope.$on('$destroy', function() {

17
js/ext/angular/src/directive/ionicScroll.js vendored
View File

@@ -3,6 +3,22 @@
angular.module('ionic.ui.scroll', [])
/**
* @ngdoc directive
* @name ionScroll
* @module ionic
* @restrict E
*
* @description
* Creates a scrollable container for all content inside.
*
* @param {string=} direction Which way to scroll. 'x' or 'y'. Default 'y'.
* @param {boolean=} paging Whether to scroll with paging.
* @param {expression=} on-refresh Called on pull-to-refresh, triggered by an {@link ionic.directive:ionRefresher}.
* @param {expression=} on-scroll Called whenever the user scrolls.
* @param {boolean=} scrollbar-x Whether to show the horizontal scrollbar. Default false.
* @param {boolean=} scrollbar-x Whether to show the vertical scrollbar. Default true.
*/
.directive('ionScroll', ['$parse', '$timeout', '$controller', function($parse, $timeout, $controller) {
return {
restrict: 'E',
@@ -14,7 +30,6 @@ angular.module('ionic.ui.scroll', [])
paging: '@',
onRefresh: '&',
onScroll: '&',
refreshComplete: '=',
scroll: '@',
scrollbarX: '@',
scrollbarY: '@',

12
js/ext/angular/src/directive/ionicSideMenu.js vendored
View File

@@ -54,8 +54,8 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
* ![Side Menu](http://ionicframework.com.s3.amazonaws.com/docs/controllers/sidemenu.gif)
*
* For more information on side menus, check out the documenation for
* {@link ionic.directive:ionSideMenuContent ionSideMenuContent} and
* {@link ionic.directive:ionSideMenu ionSideMenu}.
* {@link ionic.directive:ionSideMenuContent} and
* {@link ionic.directive:ionSideMenu}.
*
* @usage
* To use side menus, add an `<ion-side-menus>` parent element,
@@ -85,7 +85,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
* }
* ```
*
* @param {expression=} model The model to assign this side menu container's {@link ionic.controller:ionicSideMenus ionicSideMenus} controller to. By default, assigns to $scope.sideMenuController.
* @param {expression=} model The model to assign this side menu container's {@link ionic.controller:ionicSideMenus} controller to. By default, assigns to $scope.sideMenuController.
*
*/
.directive('ionSideMenus', function() {
@@ -120,7 +120,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
*
* @description
* A container for the main visible content, sibling to one or more
* {@link ionic.directive:ionSideMenu ionSideMenu} directives.
* {@link ionic.directive:ionSideMenu} directives.
*
* An attribute directive, recommended to be used as part of an `<ion-pane>` element.
*
@@ -131,7 +131,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
* </div>
* ```
* For a complete side menu example, see the
* {@link ionic.directive:ionSideMenus#usage ionSideMenus} documentation.
* {@link ionic.directive:ionSideMenus} documentation.
*
* @param {boolean=} drag-content Whether the content can be dragged.
*
@@ -256,7 +256,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
* </ion-side-menu>
* ```
* For a complete side menu example, see the
* {@link ionic.directive:ionSideMenus#usage ionSideMenus} documentation.
* {@link ionic.directive:ionSideMenus} documentation.
*
* @param {string} side Which side the side menu is currently on. Allowed values: 'left' or 'right'.
* @param {boolean=} is-enabled Whether this side menu is enabled.

2
js/ext/angular/src/directive/ionicSlideBox.js vendored
View File

@@ -32,7 +32,7 @@ angular.module('ionic.ui.slideBox', [])
* </ion-slide-box>
* ```
*
* @param {expression=} model The model to assign this slide box container's {@link ionic.controller:ionicSlideBox ionicSlideBox} controller to. By default, assigns to $scope.slideBoxController.
* @param {expression=} model The model to assign this slide box container's {@link ionic.controller:ionicSlideBox} controller to. By default, assigns to $scope.slideBoxController.
* @param {boolean=} does-continue Whether the slide box should automatically slide.
* @param {number=} slide-interval How many milliseconds to wait to change slides (if does-continue is true). Defaults to 4000.
* @param {boolean=} show-pager Whether a pager should be shown for this slide box.

14
js/ext/angular/src/directive/ionicTabBar.js vendored
View File

@@ -12,7 +12,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
* @module ionic
*
* @description
* Controller for the {@link ionic.directive:ionTabs ionTabs} directive.
* Controller for the {@link ionic.directive:ionTabs} directive.
*/
.controller('ionicTabs', ['$scope', '$ionicViewService', '$element', function($scope, $ionicViewService, $element) {
var _selectedTab = null;
@@ -81,7 +81,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
* @param {boolean=} shouldChangeHistory Whether this selection should load this tab's view history
* (if it exists) and use it, or just loading the default page. Default false.
* Hint: you probably want this to be true if you have an
* {@link ionic.directive:ionNavView ionNavView} inside your tab.
* {@link ionic.directive:ionNavView} inside your tab.
*/
self.select = function(tab, shouldEmitEvent) {
var tabIndex;
@@ -138,7 +138,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
* @description
* Powers a multi-tabbed interface with a Tab Bar and a set of "pages" that can be tabbed through.
*
* See the {@link ionic.directive:ionTab ionTab} directive's documentation for more details.
* See the {@link ionic.directive:ionTab} directive's documentation for more details.
*
* @usage
* ```html
@@ -158,7 +158,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
* </ion-tabs>
* ```
*
* @param {expression=} model The model to assign this tabbar's {@link ionic.controller:ionicTabs ionicTabs} controller to. By default, assigns to $scope.tabsController.
* @param {expression=} model The model to assign this tabbar's {@link ionic.controller:ionicTabs} controller to. By default, assigns to $scope.tabsController.
* @param {string=} animation The animation to use when changing between tab pages.
* @param {string=} tabs-style The class to apply to the tabs. Defaults to 'tabs-positive'.
* @param {string=} tabs-type Whether to put the tabs on the top or bottom. Defaults to 'tabs-bottom'.
@@ -230,7 +230,7 @@ function($scope, $ionicViewService, $rootScope, $element) {
* on-deselect="onTabDeselected()">
* </ion-tab>
* ```
* For a complete, working tab bar example, see the {@link ionic.directive:ionTabs ionTabs} documentation.
* For a complete, working tab bar example, see the {@link ionic.directive:ionTabs} documentation.
*
* @param {string} title The title of the tab.
* @param {string=} href The link that this tab will navigate to when tapped.
@@ -239,8 +239,8 @@ function($scope, $ionicViewService, $rootScope, $element) {
* @param {string=} icon-off The icon of the tab while it is not selected.
* @param {expression=} badge The badge to put on this tab (usually a number).
* @param {expression=} badge-style The style of badge to put on this tab (eg tabs-positive).
* @param {expression=} left-buttons The left buttons to use on a parent {@link ionic.directive:ionNavBar ionNavBar} while this tab is selected.
* @param {expression=} right-buttons The right buttons to use on a parent {@link ionic.directive:ionNavBar ionNavBar} while this tab is selected.
* @param {expression=} left-buttons The left buttons to use on a parent {@link ionic.directive:ionNavBar} while this tab is selected.
* @param {expression=} right-buttons The right buttons to use on a parent {@link ionic.directive:ionNavBar} while this tab is selected.
* @param {expression=} on-select Called when this tab is selected.
* @param {expression=} on-deselect Called when this tab is deselected.
*/

16
js/ext/angular/src/directive/ionicToggle.js vendored
View File

@@ -3,8 +3,20 @@
angular.module('ionic.ui.toggle', [])
// The Toggle directive is a toggle switch that can be tapped to change
// its value
/**
* @ngdoc directive
* @name ionToggle
* @module ionic
* @restrict E
*
* @description
* An animated switch which binds a given model to a boolean.
*
* Allows dragging of the switch's nub.
*
* Behaves like any [AngularJS checkbox](http://docs.angularjs.org/api/ng/input/input[checkbox]) otherwise.
*
*/
.directive('ionToggle', ['$ionicGesture', '$timeout', function($ionicGesture, $timeout) {
return {

129
js/ext/angular/src/directive/ionicViewState.js vendored
View File

@@ -20,7 +20,35 @@
angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gesture', 'ngSanitize'])
/**
* Our Nav Bar directive which updates as the controller state changes.
* @ngdoc directive
* @name ionNavBar
* @module ionic
* @restrict E
*
* @usage
* If have an {@link ionic.directive:ionNavView} directive, we can also create an
* <ion-nav-bar>, which will create a topbar that updates as the application state changes.
* We can also add some styles and set up animations:
*
* ```html
* <body ng-app="starter">
* <!-- The nav bar that will be updated as we navigate -->
* <ion-nav-bar animation="nav-title-slide-ios7"
* type="bar-positive"
* back-button-type="button-icon"
* back-button-icon="ion-arrow-left-c"></ion-nav-bar>
*
* <!-- where the initial view template will be rendered -->
* <ion-nav-view animation="slide-left-right"></ion-nav-view>
* </body>
* ```
*
* @param {string=} back-button-type The type of the back button's icon. Available: 'button-icon' or just 'button'.
* @param {string=} back-button-icon The icon to use for the back button. For example, 'ion-arrow-left-c'.
* @param {string=} back-button-label The label to use for the back button. For example, 'Back'.
* @param animation {string=} The animation used to transition between titles.
* @param type {string=} The className for the navbar. For example, 'bar-positive'.
* @param align {string=} Where to align the title of the navbar. Available: 'left', 'right', 'center'. Defaults to 'center'.
*/
.directive('ionNavBar', ['$ionicViewService', '$rootScope', '$animate', '$compile',
function( $ionicViewService, $rootScope, $animate, $compile) {
@@ -209,6 +237,12 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
};
})
/**
* @ngdoc directive
* @name ionView
* @module ionic
* @restrict E
*/
.directive('ionView', ['$ionicViewService', '$rootScope', '$animate',
function( $ionicViewService, $rootScope, $animate) {
return {
@@ -297,6 +331,99 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
};
}])
/**
* @ngdoc directive
* @name ionNavView
* @module ionic
* @restrict E
* @codepen HjnFx
*
* @description
* As a user navigates throughout your app, Ionic is able to keep track of their
* navigation history. By knowing their history, transitions between views
* correctly slide either left or right, or no transition at all. An additional
* benefit to Ionic's navigation system is its ability to manage multiple
* histories.
*
* Ionic uses the AngularUI Router module so app interfaces can be organized
* into various "states". Like Angular's core $route service, URLs can be used
* to control the views. However, the AngularUI Router provides a more powerful
* state manager in that states are bound to named, nested, and parallel views,
* allowing more than one template to be rendered on the same page.
* Additionally, each state is not required to be bound to a URL, and data can
* be pushed to each state which allows much flexibility.
*
* The ionNavView directive is used to render templates in your application. Each template
* is part of a state. States are usually mapped to a url, and are defined programatically
* using angular-ui-router (see [their docs](https://github.com/angular-ui/ui-router/wiki)),
* and remember to replace ui-view with ion-nav-view in examples).
*
* @usage
* In this example, we will create a navigation view that contains our different states for the app.
*
* To do this, in our markup use the ionNavView top level directive, adding an
* {@link ionic.directive:ionNavBar} directive which will render a header bar that updates as we
* navigate through the navigation stack.
*
* ```html
* <ion-nav-view>
* <!-- Center content -->
* <ion-nav-bar>
* </ion-nav-bar>
* </ion-nav-view>
* ```
*
* Next, we need to setup our states that will be rendered.
*
* ```js
* var app = angular.module('myApp', ['ionic']);
* app.config(function($stateProvider) {
* $stateProvider
* .state('index', {
* url: '/',
* templateUrl: 'home.html'
* })
* .state('music', {
* url: '/music',
* templateUrl: 'music.html'
* });
* });
* ```
* Then on app start, $stateProvider will look at the url, see it matches the index state,
* and then try to load home.html into the `<ion-nav-view>`.
*
* Pages are loaded by the URLs given. One simple way to create templates in Angular is to put
* them directly into your HTML file and use the `<script type="text/ng-template">` syntax.
* So here is one way to put home.html into our app:
*
* ```html
* <script id="home" type="text/ng-template">
* <!-- The title of the ion-view will be shown on the navbar -->
* <ion-view title="'Home'">
* <ion-content ng-controller="HomeCtrl">
* <!-- The content of the page -->
* <a href="#/music">Go to music page!</a>
* </ion-content>
* </ion-view>
* </script>
* ```
*
* This is good to do because the template will be cached for very fast loading, instead of
* having to fetch them from the network.
*
* Please visit [AngularUI Router's docs](https://github.com/angular-ui/ui-router/wiki) for
* more info. Below is a great video by the AngularUI Router guys that may help to explain
* how it all works:
*
* <iframe width="560" height="315" src="//www.youtube.com/embed/dqJRoh8MnBo"
* frameborder="0" allowfullscreen></iframe>
*
* @param {string=} name A view name. The name should be unique amongst the other views in the
* same state. You can have views of the same name that live in different states. For more
* information, see ui-router's [ui-view documentation](http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view).
* @param {string=} animation The animation to use for views underneath this ionNavView.
* Defaults to 'slide-left-right'.
*/
.directive('ionNavView', ['$ionicViewService', '$state', '$compile', '$controller', '$animate',
function( $ionicViewService, $state, $compile, $controller, $animate) {
// IONIC's fork of Angular UI Router, v0.2.7

2
js/views/sliderView.js
View File

@@ -11,7 +11,7 @@
* @name ionicSlideBox
* @module ionic
* @description
* Controller for the {@link ionic.directive:ionTabs ionTabs} directive.
* Controller for the {@link ionic.directive:ionTabs} directive.
*/
(function(ionic) {