Looking to develop a custom directive named select that will replace a select element with a customized dropdown interface. For a clear example, check out this jsfiddle where the concept is demonstrated.
Let's consider the below select element:
<select ng-model="selectedOption">
<option ng-repeat="option in options" ng-bind="option.value"></option>
</select>
The main objective of this select directive is to transclude the above code into the following template:
<section>
<div ng-transclude></div>
<ol> <!-- custom dropdown/select -->
<li ng-repeat="option in options" ng-bind="option.value">
</ol>
</section>
Below is how the directive should be implemented:
myApp.directive('select', function() {
return {
templateUrl: 'view/select.html',
restrict: 'E',
transclude: true,
scope: {},
link: function(scope, element, attrs) {}
};
});
A few issues I'm encountering include:
- The transclude seems to override the entire template (check jsfiddle)
- Weird presence of
optionelement - How can I access the bound data for creating the custom dropdown effectively?
Hoping to receive guidance on resolving these challenges!
Thanks!
UPDATE: Just to clarify, the reason behind transcluding the select element is for form functionality. For instance, if a user chooses an option from the custom dropdown, the directive should also select this option within the hidden native select element. This ensures synchronization with form features like $pristine status.
UPDATE2: Managed to somewhat accomplish what I need: jsfiddle. However, it requires renaming the directive and feels like a bit of a workaround with how the options array is obtained!