List items with or without binding

This commit is contained in:
Max Lynch
2013-10-09 20:07:39 -05:00
parent ec889daf06
commit 595fc67e49
9 changed files with 107 additions and 56 deletions

View File

@ -1,21 +1,5 @@
angular.module('ionic.ui.list', ['ionic.service'])
.directive('list', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
isEditing: '='
},
template: '<ul class="list" ng-class="{\'list-editing\': isEditing}" ng-transclude></ul>',
link: function($scope, $element, $attr) {
var lv = new ionic.views.List({el: $element[0]});
}
}
})
.directive('listItem', function() {
return {
restrict: 'E',
@ -36,10 +20,11 @@ angular.module('ionic.ui.list', ['ionic.service'])
}
})
.directive('listItems', function() {
.directive('list', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
isEditing: '=',
items: '='
@ -47,10 +32,15 @@ angular.module('ionic.ui.list', ['ionic.service'])
template: '<ul class="list" ng-class="{\'list-editing\': isEditing}">' +
'<list-item ng-repeat="item in items" canDelete="item.canDelete" canSwipe="item.canSwipe">' +
' {{item.text}}' +
' <i class="{{item.icon}}" ng-if="item.icon"></i>' +
'</list-item>' +
'</ul>',
link: function($scope, $element, $attr) {
var lv = new ionic.views.List({el: $element[0]});
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
var lv = new ionic.views.List({el: $element[0]});
$element.append(transclude($scope));
}
}
}
})

View File

@ -17,7 +17,7 @@ angular.module('ionic.service.modal', ['ionic.service'])
var element = $compile(templateString)(scope);
$document[0].body.appendChild(element[0]);
var modal = ionic.views.Modal({el: element[0] });
var modal = new ionic.views.Modal({el: element[0] });
scope.modal = modal;
return modal;
},

View File

@ -0,0 +1,11 @@
describe('Ionic List', function() {
var modal, q;
beforeEach(module('ionic.ui.list'));
beforeEach(function() {
});
it('Should init', function() {
});
});

View File

@ -73,8 +73,8 @@
</div>
</li>
</list>
<list-items items="items" is-editing="isEditingItems">
</list-items>
<list items="items" is-editing="isEditingItems">
</list>
<button ng-click="edit()" class="button button-success">Edit</button>
</content>
@ -84,14 +84,44 @@
angular.module('navTest', ['ionic.ui.list'])
.controller('TestCtrl', function($scope) {
$scope.items = [{
text: 'Item 1',
canDelete: true,
canSwipe: true,
buttons: [{
text: 'Kill'
}]
}];
$scope.items = [
{
text: 'Item 1',
canDelete: true,
canSwipe: true,
icon: 'icon-chevron-right',
buttons: [{
text: 'Kill'
}]
},
{
text: 'Item 2',
canDelete: true,
canSwipe: true,
icon: 'icon-chevron-right',
buttons: [{
text: 'Kill'
}]
},
{
text: 'Item 3',
canDelete: true,
canSwipe: true,
icon: 'icon-chevron-right',
buttons: [{
text: 'Kill'
}]
},
{
text: 'Item 4',
canDelete: true,
canSwipe: true,
icon: 'icon-chevron-right',
buttons: [{
text: 'Kill'
}]
}
];
$scope.edit = function() {
$scope.isEditingItems = !$scope.isEditingItems;
}

View File

@ -1,17 +1,38 @@
describe('Ionic Modal', function() {
var modal, q;
beforeEach(module('ionic.ui.modal'));
beforeEach(module('ionic.service.modal'));
beforeEach(inject(function(Modal, $q) {
beforeEach(inject(function(Modal, $q, $templateCache) {
q = $q;
modal = Modal;
$templateCache.put('modal.html', '<div class="modal"></div>');
}));
iit('Should show', function() {
it('Should show for static template', function() {
var template = '<div class="modal"></div>';
var deferred = q.defer();
modal.fromTemplate(template);
deferred.resolve(true);
var modalInstance = modal.fromTemplate(template);
modalInstance.show();
expect(modalInstance.el.classList.contains('modal')).toBe(true);
expect(modalInstance.el.classList.contains('active')).toBe(true);
});
iit('Should show for dynamic template', function() {
var template = '<div class="modal"></div>';
var done = false;
var modalInstance = modal.fromTemplateUrl('modal.html', function(modalInstance) {
done = true;
modalInstance.show();
expect(modalInstance.el.classList.contains('modal')).toBe(true);
expect(modalInstance.el.classList.contains('active')).toBe(true);
});
waitsFor(function() {
return done;
}, "Modal should be loaded", 100);
});
});