mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
ba1859b308
Closes #1601. BREAKING CHANGE: Reordering with ion-reorder-button no longer changes the order of the items in the DOM. This change will only break your list if you were not using the onReorder callback as described in the documentation. Before, while reordering an element in a list Ionic would swap the elements underneath as the reordering happened. This sometimes caused errors with angular's ngRepeat directive. Now, reordering an element in a list does not change the order of elements in the DOM. It is expected that the end developer will use the index changes given in the `onReorder` callback to reorder the items in the list. This is simple to do, see the [examples in the ionReorderButton documentation](http://ionicframework.com/docs/api/directive/ionReorderButton/).
58 lines
1.8 KiB
JavaScript
58 lines
1.8 KiB
JavaScript
var ITEM_TPL_DELETE_BUTTON =
|
|
'<div class="item-left-edit item-delete ng-hide">' +
|
|
'</div>';
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ionDeleteButton
|
|
* @parent ionic.directive:ionItem
|
|
* @module ionic
|
|
* @restrict E
|
|
* Creates a delete button inside a list item, that is visible when the
|
|
* {@link ionic.directive:ionList ionList parent's} `show-delete` evaluates to true or
|
|
* `$ionicListDelegate.showDelete(true)` is called.
|
|
*
|
|
* Takes any ionicon as a class.
|
|
*
|
|
* See {@link ionic.directive:ionList} for a complete example & explanation.
|
|
*
|
|
* @usage
|
|
*
|
|
* ```html
|
|
* <ion-list show-delete="shouldShowDelete">
|
|
* <ion-item>
|
|
* <ion-delete-button class="ion-minus-circled"></ion-delete-button>
|
|
* Hello, list item!
|
|
* </ion-item>
|
|
* </ion-list>
|
|
* <ion-toggle ng-model="shouldShowDelete">
|
|
* Show Delete?
|
|
* </ion-toggle>
|
|
* ```
|
|
*/
|
|
IonicModule
|
|
.directive('ionDeleteButton', ['$animate', function($animate) {
|
|
return {
|
|
restrict: 'E',
|
|
require: ['^ionItem', '^?ionList'],
|
|
//Run before anything else, so we can move it before other directives process
|
|
//its location (eg ngIf relies on the location of the directive in the dom)
|
|
priority: Number.MAX_VALUE,
|
|
compile: function($element, $attr) {
|
|
//Add the classes we need during the compile phase, so that they stay
|
|
//even if something else like ngIf removes the element and re-addss it
|
|
$attr.$set('class', ($attr['class'] || '') + ' button icon button-icon', true);
|
|
return function($scope, $element, $attr, ctrls) {
|
|
var itemCtrl = ctrls[0];
|
|
var listCtrl = ctrls[1];
|
|
var container = jqLite(ITEM_TPL_DELETE_BUTTON);
|
|
container.append($element);
|
|
itemCtrl.$element.append(container).addClass('item-left-editable');
|
|
|
|
if (listCtrl && listCtrl.showDelete()) {
|
|
$animate.removeClass(container, 'ng-hide');
|
|
}
|
|
};
|
|
}
|
|
};
|
|
}]);
|