I am currently working on integrating custom functions from Bootstrap Typeahead into a new directive. To achieve this, I need to include the original Typeahead directive within mine and pass my parameters along:
Here is the original directive:
<div class="typeahead typeahead-lookup">
<input ng-model="vm.myModel"
uib-typeahead="item as item.Formatted for item in vm.refreshSearch($viewValue)"
typeahead-wait-ms="1000"
typeahead-min-length="1"
typeahead-editable="false"
placeholder="SEARCH..."
type="text"
class="form-control">
</div>
This is my custom directive:
<select-lookup model="vm.myModel"
items="item as item.Formatted for item in vm.refreshSearch($viewValue)"
</select-lookup>
And here is how I am attempting to implement it:
function selectLookup($compile) {
return {
restrict: 'E',
scope: {
model: "=",
items: "@"
},
compile: function(element, attrs) {
return function(scope, element, attrs) {
var template = '<div class="typeahead typeahead-lookup">' +
'<input ng-model="model"' +
'uib-typeahead="{{items}}"' +
'typeahead-wait-ms="1000"' +
'typeahead-min-length="1"' +
'typeahead-editable="false"' +
'placeholder="SEARCH..."' +
'type="text"' +
'class="form-control">' +
'</div>';
element.html(template);
$compile(element.contents())(scope);
};
}
};
}
I am encountering difficulties with passing parameters from my directive to the original Typeahead directive, particularly with the "items" parameter. I received the following error:
Expected typeahead specification in form of "_modelValue_ (as _label_)? for _item_ in _collection_" but got "{{items}}"Can someone assist me in resolving this issue?