Skip to content

Commit 78844cb

Browse files
alannestaalannesta
committed
a simplified version without using repeat parser and manual transclude into different locations
1 parent 365becf commit 78844cb

File tree

8 files changed

+24
-197
lines changed

8 files changed

+24
-197
lines changed

‎app/scripts/controllers/about.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,16 @@ angular.module('angularTestApp').controller('aboutCtrl', ['$interval','$scope',f
1515

1616
$scope.test = 'yeehaw';
1717

18-
// $scope.$watch('selection.selected', function(newVal){
19-
// console.log('value changed');
20-
// console.log(newVal);
21-
// });
22-
23-
$scope.$watch('test', function(newVal){
24-
console.log('value changed');
25-
console.log(newVal);
18+
$scope.$watch('selection.selected', function(newVal){
19+
console.log('value changed');
20+
console.log(newVal);
2621
});
2722

23+
// $scope.$watch('test', function(newVal){
24+
// console.log('value changed');
25+
// console.log(newVal);
26+
// });
27+
2828
// $scope.$watch('users', function(newVal){
2929
// console.log('value changed');
3030
// console.log(newVal);

‎app/scripts/directives/dropdown-items.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<ul class="ui-select-choices ui-select-choices-content dropdown-menu"
2-
role="menu" ng-show="$select.items.length > 0">
2+
role="menu">
33
<li class="ui-select-choices-group">
4-
<div class="divider" ng-show="$select.isGrouped && $index > 0"></div>
5-
<div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header" ng-bind-html="$group.name"></div>
6-
<div class="ui-select-choices-row" ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}">
7-
<a href="javascript:void(0)" class="ui-select-choices-row-inner"></a>
4+
<div class="ui-select-choices-row" ng-click = "$select.select(user, $event)" ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}" ng-repeat = "user in users">
5+
<a href="javascript:void(0)" class="ui-select-choices-row-inner" uis-transclude-append></a>
6+
<!-- <a href="javascript:void(0)" class="ui-select-choices-row-inner" ng-transclude></a> -->
7+
88
</div>
99
</li>
1010
</ul>

‎app/scripts/directives/dropdown-items.js

Lines changed: 3 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -19,53 +19,14 @@
1919
transclude: true,
2020
templateUrl: './scripts/directives/dropdown-items.html',
2121
compile: function(tElement, tAttrs) {
22-
if (!tAttrs.repeat){
23-
throw"Expected 'repeat' expression.";
24-
}
22+
// if (!tAttrs.repeat){
23+
// throw "Expected 'repeat' expression.";
24+
// }
2525

2626
return function link(scope, element, attrs, $select, transcludeFn) {
27-
// var repeat = RepeatParser.parse(attrs.repeat);
28-
var groupByExp = attrs.groupBy;
29-
30-
31-
$select.parseRepeatAttr(attrs.repeat, groupByExp); //Result ready at $select.parserResult
32-
33-
$select.disableChoiceExpression = attrs.uiDisableChoice;
34-
$select.onHighlightCallback = attrs.onHighlight;
35-
36-
if(groupByExp) {
37-
var groups = element.querySelectorAll('.ui-select-choices-group');
38-
if (groups.length !== 1) throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-group but got '{0}'.", groups.length);
39-
groups.attr('ng-repeat', RepeatParser.getGroupNgRepeatExpression());
40-
}
41-
42-
var choices = element.querySelectorAll('.ui-select-choices-row');
43-
//if (choices.length !== 1) {
44-
// throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-row but got '{0}'.", choices.length);
45-
//}
46-
47-
choices.attr('ng-repeat', RepeatParser.getNgRepeatExpression($select.parserResult.itemName, '$select.items', $select.parserResult.trackByExp, groupByExp))
48-
.attr('ng-if', '$select.open') //Prevent unnecessary watches when dropdown is closed
49-
.attr('ng-mouseenter', '$select.setActiveItem('+$select.parserResult.itemName +')')
50-
.attr('ng-click', '$select.select(' + $select.parserResult.itemName + ',false,$event)');
51-
52-
var rowsInner = element.querySelectorAll('.ui-select-choices-row-inner');
53-
//if (rowsInner.length !== 1) throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-row-inner but got '{0}'.", rowsInner.length);
54-
rowsInner.attr('uis-transclude-append', ''); //Adding uisTranscludeAppend directive to row element after choices element has ngRepeat
55-
56-
$compile(element, transcludeFn)(scope); //Passing current transcludeFn to be able to append elements correctly from uisTranscludeAppend
57-
5827
scope.$watch('$select.search', function(newValue) {
5928
if(newValue && !$select.open && $select.multiple) $select.activate(false, true);
60-
// $select.activeIndex = $select.tagging.isActivated ? -1 : 0;
61-
// $select.refresh(attrs.refresh);
6229
});
63-
64-
// attrs.$observe('refreshDelay', function() {
65-
// // $eval() is needed otherwise we get a string instead of a number
66-
// var refreshDelay = scope.$eval(attrs.refreshDelay);
67-
// $select.refreshDelay = refreshDelay !== undefined ? refreshDelay : uiSelectConfig.refreshDelay;
68-
// });
6930
};
7031
}
7132
};

‎app/scripts/directives/dropdown-list.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
<div class="ui-select-bootstrap dropdown" ng-class="{open: $select.open}">
2-
<div class="ui-select-match"></div> <!-- replaced by directive <dropdown-selected></dropdown-selected> -->
3-
<input type="text" autocomplete="off" tabindex="-1"
2+
<input type="text" autocomplete="off" tabindex="-1"
43
class="form-control ui-select-search"
54
placeholder="{{$select.placeholder}}"
6-
ng-model="$select.search"
5+
ng-model="$select.selected.publisher"
76
ng-show="$select.searchEnabled && $select.open">
8-
<div class="ui-select-choices"></div> <!-- replaced by directive <dropdown-items></dropdown-items> -->
97
</div>
108

‎app/scripts/directives/dropdown-list.js

Lines changed: 1 addition & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -29,43 +29,6 @@
2929

3030
var $select = ctrls[0];
3131
var ngModel = ctrls[1];
32-
var searchInput = element.querySelectorAll('input.ui-select-search');
33-
34-
//From view --> model
35-
ngModel.$parsers.unshift(function (inputValue) {
36-
var locals = {},
37-
result;
38-
39-
locals = {};
40-
locals[$select.parserResult.itemName] = inputValue;
41-
result = $select.parserResult.modelMapper(scope, locals);
42-
return result;
43-
44-
});
45-
46-
//From model --> view
47-
ngModel.$formatters.unshift(function (inputValue) {
48-
var data = $select.parserResult.source (scope, { $select : {search:''}}), //Overwrite $search
49-
locals = {},
50-
result;
51-
if (data){
52-
53-
var checkFnSingle = function(d){
54-
locals[$select.parserResult.itemName] = d;
55-
result = $select.parserResult.modelMapper(scope, locals);
56-
return result == inputValue;
57-
};
58-
//If possible pass same object stored in $select.selected
59-
if ($select.selected && checkFnSingle($select.selected)) {
60-
return $select.selected;
61-
}
62-
for (var i = data.length - 1; i >= 0; i--) {
63-
if (checkFnSingle(data[i])) return data[i];
64-
}
65-
}
66-
67-
return inputValue;
68-
});
6932

7033
//Set reference to ngModel from dropdownListCtrl
7134
$select.ngModel = ngModel;
@@ -80,28 +43,8 @@
8043
$select.selected = ngModel.$viewValue;
8144
};
8245

83-
8446
transcludeFn(scope, function(clone) {
85-
// See Transclude in AngularJS http://blog.omkarpatil.com/2012/11/transclude-in-angularjs.html
86-
87-
// One day jqLite will be replaced by jQuery and we will be able to write:
88-
// var transcludedElement = clone.filter('.my-class')
89-
// instead of creating a hackish DOM element:
90-
var transcluded = angular.element('<div>').append(clone);
91-
92-
var transcludedMatch = transcluded.querySelectorAll('.ui-select-match');
93-
transcludedMatch.removeAttr('ui-select-match'); //To avoid loop in case directive as attr
94-
//if (transcludedMatch.length !== 1) {
95-
// throw uiSelectMinErr('transcluded', "Expected 1 .ui-select-match but got '{0}'.", transcludedMatch.length);
96-
//}
97-
element.querySelectorAll('.ui-select-match').replaceWith(transcludedMatch);
98-
99-
var transcludedChoices = transcluded.querySelectorAll('.ui-select-choices');
100-
transcludedChoices.removeAttr('ui-select-choices'); //To avoid loop in case directive as attr
101-
//if (transcludedChoices.length !== 1) {
102-
// throw uiSelectMinErr('transcluded', "Expected 1 .ui-select-choices but got '{0}'.", transcludedChoices.length);
103-
//}
104-
element.querySelectorAll('.ui-select-choices').replaceWith(transcludedChoices);
47+
element.append(clone);
10548
});
10649

10750
}

‎app/scripts/directives/dropdown-selected.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,7 @@
1818
transclude: true,
1919
templateUrl: './scripts/directives/dropdown-selected.html',
2020
link: function(scope, element, attrs, $select) {
21-
//console.log('$select in MATCH: ');
22-
//console.log($select);
23-
$select.lockChoiceExpression = attrs.uiLockChoice;
21+
2422
// attrs.$observe('placeholder', function(placeholder) {
2523
// $select.placeholder = placeholder !== undefined ? placeholder : uiSelectConfig.placeholder;
2624
// });

‎app/scripts/directives/dropdownListCtrl.js

Lines changed: 2 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
var ctrl = this;
55

66
ctrl.items = [];
7-
ctrl.placeholder = 'lai yi fa';
7+
ctrl.placeholder = '';
88
ctrl.selected = undefined;
99

1010
ctrl.searchEnabled = true;
@@ -22,64 +22,6 @@
2222
}
2323
};
2424

25-
ctrl.parseRepeatAttr = function (repeatAttr, groupByExp) {
26-
function updateGroups(items) {
27-
ctrl.groups = [];
28-
angular.forEach(items, function (item) {
29-
var groupFn = $scope.$eval(groupByExp);
30-
var groupName = angular.isFunction(groupFn) ? groupFn(item) : item[groupFn];
31-
var group = ctrl.findGroupByName(groupName);
32-
if (group) {
33-
group.items.push(item);
34-
}
35-
else {
36-
ctrl.groups.push({name: groupName, items: [item]});
37-
}
38-
});
39-
ctrl.items = [];
40-
ctrl.groups.forEach(function (group) {
41-
ctrl.items = ctrl.items.concat(group.items);
42-
});
43-
}
44-
45-
function setPlainItems(items) {
46-
ctrl.items = items;
47-
}
48-
49-
var setItemsFn = groupByExp ? updateGroups : setPlainItems;
50-
51-
ctrl.parserResult = RepeatParser.parse(repeatAttr);
52-
53-
ctrl.isGrouped = !!groupByExp;
54-
ctrl.itemProperty = ctrl.parserResult.itemName;
55-
56-
// See https://github.com/angular/angular.js/blob/v1.2.15/src/ng/directive/ngRepeat.js#L259
57-
$scope.$watchCollection(ctrl.parserResult.source, function (items) {
58-
59-
if (items === undefined || items === null) {
60-
// If the user specifies undefined or null => reset the collection
61-
// Special case: items can be undefined if the user did not initialized the collection on the scope
62-
// i.e $scope.addresses = [] is missing
63-
ctrl.items = [];
64-
} else {
65-
if (!angular.isArray(items)) {
66-
throw "Expected an array but got '{0}'.";
67-
} else {
68-
if (ctrl.multiple) {
69-
//Remove already selected items (ex: while searching)
70-
var filteredItems = items.filter(function (i) {
71-
return ctrl.selected.indexOf(i) < 0;
72-
});
73-
setItemsFn(filteredItems);
74-
} else {
75-
setItemsFn(items);
76-
}
77-
ctrl.ngModel.$modelValue = null; //Force scope model value and ngModel value to be out of sync to re-run formatters
78-
}
79-
}
80-
});
81-
};
82-
8325
ctrl.setActiveItem = function (item) {
8426
ctrl.activeIndex = ctrl.items.indexOf(item);
8527
};
@@ -105,15 +47,7 @@
10547

10648
// When the user selects an item with ENTER or clicks the dropdown
10749
ctrl.select = function (item, $event) {
108-
// debugger;
109-
var locals = {};
110-
locals[ctrl.parserResult.itemName] = item;
111-
112-
//ctrl.onSelectCallback($scope, {
113-
// $item: item,
114-
// $model: ctrl.parserResult.modelMapper($scope, locals)
115-
//});
116-
50+
11751
ctrl.selected = item;
11852

11953
if (!ctrl.multiple || ctrl.closeOnSelect) {
@@ -127,14 +61,7 @@
12761
// Closes the dropdown
12862
ctrl.close = function (skipFocusser) {
12963
if (!ctrl.open) return;
130-
// _resetSearchInput();
13164
ctrl.open = false;
132-
// if (!ctrl.multiple) {
133-
// $timeout(function () {
134-
// ctrl.focusser.prop('disabled', false);
135-
// if (!skipFocusser) ctrl.focusser[0].focus();
136-
// }, 0, false);
137-
// }
13865
};
13966

14067
// Toggle dropdown

‎app/views/about.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<!-- <h4>It works!</h4> -->
22
<acq-dropdown-list ng-model="selection.selected">
33
<acq-dropdown-selected>
4-
<span ng-bind="$select.selected.publisher"></span> <!-- automatically transcuded, can get the $select scope from acq-dropdown-list -->
4+
<span ng-bind="$select.selected.publisher"></span>
55
<span ng-bind="$select.selected.rollover"></span>
66
</acq-dropdown-selected>
7-
<acq-dropdown-items repeat = "user in users">
7+
<acq-dropdown-items>
88
<span ng-bind="user.publisher"></span>
99
<span ng-bind="user.rollover"></span>
1010
</acq-dropdown-items>

0 commit comments

Comments
 (0)