Commit Graph

10 Commits

Author SHA1 Message Date
Andy Joslin
986dbac893 refactor(ionList): more expressive, declarative (breaking change)
Closes #1024.

BREAKING CHANGE: ion-list syntax has changed in favor of simplicity &
flexibility.

Relevant documentation:
[ionList](http://ionicframework.com/docs/api/directive/ionList),
[ionItem](http://ionicframework.com/docs/api/directive/ionItem),
[ionOptionButton](http://ionicframework.com/docs/api/directive/ionOptionButton),
[ionReorderButton](http://ionicframework.com/docs/api/directive/ionReorderButton),
[ionDeleteButton](http://ionicframework.com/docs/api/directive/ionDeleteButton),
[$ionicListDelegate](http://ionicframework.com/docs/api/service/$ionicListDelegate).

To migrate, change your code from this:

```html
<ion-list option-buttons="[{text:'hello',type:'button-positive',onTap:tap()}]"
          on-delete="onDelete(el)"
          delete-icon="ion-minus-circled"
          can-delete="true"
          show-delete="shouldShowDelete"
          on-reorder="onReorder(el, startIndex, toIndex)"
          reorder-icon="ion-navicon"
          can-reorder="true"
          show-reorder="shouldShowReorder">
  <ion-item ng-repeat="item in items">
    {{item}}
  </ion-item>
</ion-list>
```

To this:

```html
<ion-list show-delete="shouldShowDelete"
          show-reorder="shouldShowReorder">
  <ion-item ng-repeat="item in items">
    {{item}}
    <ion-delete-button class="ion-minus-circled"
                       ng-click="onDelete(item)">
    </ion-delete-button>
    <ion-reorder-button class="ion-navicon"
                       ng-click="onReorder(item, $fromIndex, $toIndex)">
    </ion-reorder-button>
    <ion-option-button class="button-positive" ng-click="tap()">
      Hello
    </ion-option-button>
  </ion-item>
</ion-list>
```
2014-04-04 10:12:16 -06:00
Andy Joslin
c1d2571d5e scroll: add $ionicScrollDelegate with new pattern
Addresses #877
2014-03-24 15:58:22 -06:00
Andy Joslin
dbe4e3901d feat(ionic): remove all delegates
BREAKING CHANGE: $ionicScrollDelegate, $ionicSlideBoxDelegate, and
$ionicSideMenuDelegate have been removed.

  - $ionicScrollDelegate has been changed to $ionicScrollController.
    Documentation:
    [ionContent](
    http://ajoslin.github.io/docs/nightly/api/directive/ionContent),
    [ionScroll](
    http://ajoslin.github.io/docs/nightly/api/directive/ionScroll)

    Change your code from this:

    ```html
    <ion-content ng-controller="MyCtrl">
      <button ng-click="scrollBottom()">Scroll to bottom!</button>
    </ion-content>
    ```
    ```js
    function MyCtrl($scope, $ionicScrollDelegate) {
      $scope.scrollBottom = function() {
        $ionicScrollDelegate.scrollBottom();
      };
    }
    ```

    To this:

    ```html
    <!-- optional attr controller-bind, see docs -->
    <ion-content ng-controller="MyCtrl">
      <button ng-click="scrollBottom()">Scroll to bottom!</button>
    </ion-content>
    ```
    ```js
    function MyCtrl($scope) {
      $scope.scrollBottom = function() {
        $scope.$ionicScrollController.scrollBottom();
      };
    }
    ```

  - $ionicSideMenuDelegate has been changed to
    $ionicSideMenusController. Documentation:
    [ionSideMenus](http://ajoslin.github.io/docs/nightly/api/directive/ionSideMenus)

    Change your code from this:

    ```html
    <ion-side-menus>
      <ion-side-menu side="left">Side Menu Left</ion-side-menu>
      <ion-pane ion-side-menu-content ng-controller="MyCtrl">
        <button ng-click="toggleLeftMenu()">
          Toggle Left Menu!
        </button>
      </ion-pane>
    </ion-side-menus>
    ```
    ```js
    function MyCtrl($scope, $ionicSideMenuDelegate) {
      $scope.toggleLeftMenu = function() {
        $ionicSideMenuDelegate.toggleLeft();
      };
    }
    ```

    To this:

    ```html
    <!-- optional attr controller-bind, see documentation -->
    <ion-side-menus>
      <ion-side-menu side="left">Side Menu Left</ion-side-menu>
      <ion-pane ion-side-menu-content ng-controller="MyCtrl">
        <button ng-click="toggleLeftMenu()">
          Toggle Left Menu!
        </button>
      </ion-pane>
    </ion-side-menus>
    ```
    ```js
    function MyCtrl($scope) {
      $scope.toggleLeftMenu = function() {
        $scope.$ionicSideMenuController.toggleLeft();
      };
    }
    ```

  - $ionicSlideBoxDelegate has been removed and upgraded to
    $ionicSlideBoxController. It had only one method that
    was unneeded.  [Documentation](
    http://ajoslin.github.io/docs/nightly/api/directive/ionSlideBox)
2014-03-19 11:51:07 -06:00
Andy Joslin
a40baff555 tests: update for new directive syntaxes 2014-03-18 08:13:05 -06:00
Andy Joslin
4715a118e0 refactor($ionicScrollDelegate): make it a factory from current scope
BREAKING CHANGE: $ionicScrollDelegate no longer works globally; you must
create a new instance of each time you use it.  The actual methods on
each instance of $ionicScrollDelegate are the same, however.

Change your code from this:

```js
function MyController($scope, $ionicScrollDelegate) {
  $scope.scrollTop = function() {
    $ionicScrollDelegate.scrollTop();
  };
}
```

To this:

```js
function MyController($scope, $ionicScrollDelegate) {
  var delegate = $ionicScrollDelegate($scope);
  $scope.scrollTop = function() {
    delegate.scrollTop();
  };
}
```
2014-03-17 07:21:20 -06:00
Andy Joslin
2c39a21498 feat(ionic): prefix all directives with ion-
BREAKING CHANGE: All directives are now prefixed with `ion-`.

For any directive you use, add the ionic prefix.

For example, change this HTML:

```html
<tabs>
  <tab title="home" href="/tab/home">
    <content>Hello!</content>
  </tab>
</tabs>
```

To this HTML:

```
<ion-tabs>
  <ion-tab title="home" href="/tab/home">
    <ion-content>Hello!</ion-content>
  </ion-tab>
</ion-tabs>
```
2014-02-18 16:13:00 -05:00
Andy Joslin
68ffe8b7a3 test(anchorScroll): improve test page 2014-02-13 09:42:57 -05:00
Andy Joslin
1c4d4a8b90 fix(browser): on first hash-set, dont set scrollTop 2014-02-11 09:44:59 -05:00
Andy Joslin
5d2f24cf59 chore(): make test files use ionic.bundle.js 2014-02-10 13:49:02 -05:00
Andy Joslin
4c9a4c0c62 refactor(anchorScroll): only get element ids under scrollEl 2014-02-09 18:06:05 -05:00