mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
Added link-item for linked list items
This commit is contained in:
78
js/ext/angular/src/directive/ionicList.js
vendored
78
js/ext/angular/src/directive/ionicList.js
vendored
@ -3,6 +3,82 @@
|
|||||||
|
|
||||||
angular.module('ionic.ui.list', ['ngAnimate'])
|
angular.module('ionic.ui.list', ['ngAnimate'])
|
||||||
|
|
||||||
|
.directive('linkItem', ['$timeout', function($timeout) {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
require: ['?^list'],
|
||||||
|
replace: true,
|
||||||
|
transclude: true,
|
||||||
|
scope: {
|
||||||
|
item: '=',
|
||||||
|
onSelect: '&',
|
||||||
|
onDelete: '&',
|
||||||
|
canDelete: '@',
|
||||||
|
canReorder: '@',
|
||||||
|
canSwipe: '@',
|
||||||
|
buttons: '=',
|
||||||
|
type: '@',
|
||||||
|
href: '@'
|
||||||
|
},
|
||||||
|
template: '<a href="{{href}}" class="item">\
|
||||||
|
<div class="item-edit" ng-if="canDelete && isEditing">\
|
||||||
|
<button class="button button-icon" ng-click="onDelete()"><i ng-class="deleteIcon"></i></button>\
|
||||||
|
</div>\
|
||||||
|
<div class="item-content slide-left" ng-transclude>\
|
||||||
|
</div>\
|
||||||
|
<div class="item-drag" ng-if="canReorder && isEditing">\
|
||||||
|
<button data-ionic-action="reorder" class="button button-icon"><i ng-class="reorderIcon"></i></button>\
|
||||||
|
</div>\
|
||||||
|
<div class="item-options" ng-if="canSwipe && !isEditing && showOptions">\
|
||||||
|
<button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
|
||||||
|
</div>\
|
||||||
|
</a>',
|
||||||
|
|
||||||
|
link: function($scope, $element, $attr, list) {
|
||||||
|
// Grab the parent list controller
|
||||||
|
if(list[0]) {
|
||||||
|
list = list[0];
|
||||||
|
} else if(list[1]) {
|
||||||
|
list = list[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
$attr.$observe('href', function(value) {
|
||||||
|
$scope.href = value;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add the list item type class
|
||||||
|
$element.addClass($attr.type || 'item-complex');
|
||||||
|
|
||||||
|
if($attr.type !== 'item-complex') {
|
||||||
|
$scope.canSwipe = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.isEditing = false;
|
||||||
|
$scope.deleteIcon = list.scope.deleteIcon;
|
||||||
|
$scope.reorderIcon = list.scope.reorderIcon;
|
||||||
|
$scope.showOptions = true;
|
||||||
|
|
||||||
|
$scope.buttonClicked = function(button) {
|
||||||
|
button.onButtonClicked && button.onButtonClicked($scope.item, button);
|
||||||
|
};
|
||||||
|
|
||||||
|
list.scope.$watch('isEditing', function(v) {
|
||||||
|
$scope.isEditing = v;
|
||||||
|
|
||||||
|
// Add a delay before we allow the options layer to show, to avoid any odd
|
||||||
|
// animation issues
|
||||||
|
if(!v) {
|
||||||
|
$timeout(function() {
|
||||||
|
$scope.showOptions = true;
|
||||||
|
}, 200);
|
||||||
|
} else {
|
||||||
|
$scope.showOptions = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}])
|
||||||
|
|
||||||
.directive('item', ['$timeout', function($timeout) {
|
.directive('item', ['$timeout', function($timeout) {
|
||||||
return {
|
return {
|
||||||
restrict: 'E',
|
restrict: 'E',
|
||||||
@ -17,7 +93,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
|
|||||||
canReorder: '@',
|
canReorder: '@',
|
||||||
canSwipe: '@',
|
canSwipe: '@',
|
||||||
buttons: '=',
|
buttons: '=',
|
||||||
type: '@'
|
type: '@',
|
||||||
},
|
},
|
||||||
template: '<li class="item">\
|
template: '<li class="item">\
|
||||||
<div class="item-edit" ng-if="canDelete && isEditing">\
|
<div class="item-edit" ng-if="canDelete && isEditing">\
|
||||||
|
|||||||
Reference in New Issue
Block a user