Question

我有以下情况：

表单有一个名为<timeZone ng-model="formModel.timeZone"
此指令调用Web服务以检索时区
该指令然后将它们放入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在初始化时未定义。

Answer 1

尝试使用nForm

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

 ...uiSelect

</ng-form>

AngularJS将模型传递给ui-select

1 个答案: