Here is the scenario at hand:
- A form includes a directive known as
<timeZone ng-model="formModel.timeZone" - This directive communicates with a web service to fetch timezone information
- The directive then presents the timezones in a ui-select dropdown
The form itself does not concern itself with the list of timezones; all that logic is encapsulated within the directive. Its main objective is to handle the selection and storage of the chosen timezone.
Code - Form:
<time-zone name="preferredTz" ng-model="profileDetails.preferredTz" ng-required="true"></time-zone>
Code - Directive (JavaScript):
.directive('timeZone', function (staticCommonResourcesAPI) {
return {
restrict: 'E',
require: 'ngModel',
templateUrl: 'shared/partials/timezoneField.tpl.html',
link: function(scope, element, attr, ngModel){
scope.timezones = [];
staticCommonResourcesAPI.getTimezones().then(function (response) {
scope.timezones = response.payload;
});
}
};
});
Code - Directive (HTML Template)
<ui-select
id="timezoneCode"
name="timezoneCode"
required="true"
theme="bootstrap"
ng-disabled="disabled || signupStatusTag">
<ui-select-match>{{$select.selected.code}}</ui-select-match>
<ui-select-choices repeat="timezone.code as timezone in timezones | filter: $select.search" class="ui-select-override-top-style">
<span class='no-underline'>{{timezone.name}}</span>
</ui-select-choices>
</ui-select>
To properly integrate profileDetails.preferredTz with uiSelectModel.selected, it seems that attention should be given to how ui-select functions.
Attempts have been made using scope : true, but thus far it has resulted in either the ui-select utilizing an entirely different model or the profileDetails.preferredTz being set to undefined upon initialization.