AngularJS将模型传递给ui-select

Question

我有以下情况：

1. 表单具有名为<timeZone ng-model="formModel.timeZone"的指令
2. 该指令调用Web服务以检索时区
3. 然后，该指令将它们放入ui-select中

该表格并不关心时区列表，这些都包含在指令中。 它只关心获取和设置选定的时区。

代码-形式：

<time-zone name="preferredTz" ng-model="profileDetails.preferredTz" ng-required="true"></time-zone>

代码-指令（JS）：

.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;
                });
            }
        };
    });

代码-指令（HTML模板）

<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>

如果我了解ui-select如何正常工作，则需要将profileDetails.preferredTz与uiSelectModel.selected绑定。

我试过使用scope : true ，但是到目前为止，所有的事情是ui-select完全使用了不同的模型，或者最终在初始化时将profileDetails.preferredTz设置为undefined。

Answer 1

尝试使用nForm

<ng-form timezone ng-model="myModel">

 ...uiSelect

</ng-form>