From f9766fcf162b5d7c11b63bcbef537adfb9d4d035 Mon Sep 17 00:00:00 2001 From: Andy Joslin Date: Mon, 10 Mar 2014 21:15:54 -0600 Subject: [PATCH] docs(): Add docs for ionicViewState, polish other docs --- .../src/controller/ionicScrollController.js | 3 + js/ext/angular/src/directive/ionicContent.js | 27 +++- js/ext/angular/src/directive/ionicList.js | 4 +- .../src/directive/ionicNavAnimation.js | 2 +- js/ext/angular/src/directive/ionicRadio.js | 2 +- js/ext/angular/src/directive/ionicScroll.js | 17 ++- js/ext/angular/src/directive/ionicSideMenu.js | 12 +- js/ext/angular/src/directive/ionicSlideBox.js | 2 +- js/ext/angular/src/directive/ionicTabBar.js | 14 +- js/ext/angular/src/directive/ionicToggle.js | 16 ++- .../angular/src/directive/ionicViewState.js | 129 +++++++++++++++++- js/views/sliderView.js | 2 +- 12 files changed, 201 insertions(+), 29 deletions(-) diff --git a/js/ext/angular/src/controller/ionicScrollController.js b/js/ext/angular/src/controller/ionicScrollController.js index 7e42078da5b..c7b167147d5 100644 --- a/js/ext/angular/src/controller/ionicScrollController.js +++ b/js/ext/angular/src/controller/ionicScrollController.js @@ -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; diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js index 550459c9705..95d58b34b27 100644 --- a/js/ext/angular/src/directive/ionicContent.js +++ b/js/ext/angular/src/directive/ionicContent.js @@ -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 * ` element, + * When used under an {@link ionic.directive:ionNavView} and on an `` element, * allows you to set the animation all clicks on that link within the navView use. * * @usage diff --git a/js/ext/angular/src/directive/ionicRadio.js b/js/ext/angular/src/directive/ionicRadio.js index 3abd44b10e8..730aa057fc5 100644 --- a/js/ext/angular/src/directive/ionicRadio.js +++ b/js/ext/angular/src/directive/ionicRadio.js @@ -120,7 +120,7 @@ angular.module('ionic.ui.radio', []) $element.addClass('active'); } }); - + ionic.on('tap', clickHandler, $element[0]); $scope.$on('$destroy', function() { diff --git a/js/ext/angular/src/directive/ionicScroll.js b/js/ext/angular/src/directive/ionicScroll.js index 44f856a9f37..806394f812a 100644 --- a/js/ext/angular/src/directive/ionicScroll.js +++ b/js/ext/angular/src/directive/ionicScroll.js @@ -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: '@', diff --git a/js/ext/angular/src/directive/ionicSideMenu.js b/js/ext/angular/src/directive/ionicSideMenu.js index 74182661573..ba5b34b835d 100644 --- a/js/ext/angular/src/directive/ionicSideMenu.js +++ b/js/ext/angular/src/directive/ionicSideMenu.js @@ -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 `` 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 `` element. * @@ -131,7 +131,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie * * ``` * 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 * * ``` * 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. diff --git a/js/ext/angular/src/directive/ionicSlideBox.js b/js/ext/angular/src/directive/ionicSlideBox.js index 80ff28bc984..4d62dea1e47 100644 --- a/js/ext/angular/src/directive/ionicSlideBox.js +++ b/js/ext/angular/src/directive/ionicSlideBox.js @@ -32,7 +32,7 @@ angular.module('ionic.ui.slideBox', []) * * ``` * - * @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. diff --git a/js/ext/angular/src/directive/ionicTabBar.js b/js/ext/angular/src/directive/ionicTabBar.js index 4949fafb780..10ea896d188 100644 --- a/js/ext/angular/src/directive/ionicTabBar.js +++ b/js/ext/angular/src/directive/ionicTabBar.js @@ -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']) * * ``` * - * @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()"> * * ``` - * 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. */ diff --git a/js/ext/angular/src/directive/ionicToggle.js b/js/ext/angular/src/directive/ionicToggle.js index ca410e4c141..ecac32920b0 100644 --- a/js/ext/angular/src/directive/ionicToggle.js +++ b/js/ext/angular/src/directive/ionicToggle.js @@ -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 { diff --git a/js/ext/angular/src/directive/ionicViewState.js b/js/ext/angular/src/directive/ionicViewState.js index f9f69f84ff3..ada4388e1b0 100644 --- a/js/ext/angular/src/directive/ionicViewState.js +++ b/js/ext/angular/src/directive/ionicViewState.js @@ -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 + * , which will create a topbar that updates as the application state changes. + * We can also add some styles and set up animations: + * + * ```html + * + * + * + * + * + * + * + * ``` + * + * @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 + * + * + * + * + * + * ``` + * + * 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 ``. + * + * 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 ` + * ``` + * + * 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: + * + * + * + * @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 diff --git a/js/views/sliderView.js b/js/views/sliderView.js index 472139ae079..159c2d5215b 100644 --- a/js/views/sliderView.js +++ b/js/views/sliderView.js @@ -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) {