在加载ng-options之前更新模型时选择select选项

Question

我有一个“ state-select”指令，该指令使用基于countryCode的状态列表填充select元素。 该指令监视countryCode的更改，以更新提供给ng-options的属性。

我现在正在尝试从控制器中设置model.countryCode和model.sateCode，但是当countryCode更改时会填充状态选择，因此会在加载选项之前更新模型值。

加载选项后，如何确定select是否选择了其ng-model中引用的选项？

这是我的指令：

.directive( 'stateSelect', [ 'CDN_VIEW', 'locationService', function( CDN_VIEW, locationService ) {
    return {
        restrict: 'E',
        scope: {
            'ngModel': '=',
            'country': '=',
        },
        link: function stateSelect( $scope, elements, attrs ) {
            $scope.states = null;
            function loadCountryStates( countryCode ) {
                if ( !countryCode ) {
                    return false;
                }

                $scope.ngModel = undefined;
                locationService.getCountryStates( countryCode ).then ( function getStates( states ) {
                    $scope.states = states;
                } );
            }

            $scope.$watch( 'country', loadCountryStates );
        },
        templateUrl: 'states.html'
    };
} ] )

模板：

<select ng-model="ngModel" ng-options="s.code as s.name for s in states">
    <option value="" disabled>select state</option>
</select>

这是指令的使用：

<state-select ng-model="info.stateCode" country="info.countryCode">

这是我在控制器中正在做的事情：

function setDetectedLocation( location ) {
    $scope.info.countryCode = location.countryCode;
    $scope.info.stateCode = location.stateCode;
    $scope.info.city = location.city;
}

locationService.getLocation().then( setDetectedLocation, locationError );

当我手动填写选择项时，它可以工作；如果我两次运行getLocation，则已经加载了该国家/地区的州时，它也可以工作。

有指针吗？

Answer 1

我终于解决了这个问题。 诀窍是取消控制器模型（具有实际值的模型）与指令的选择模型（具有所选选项的模型）的关联。 这样，我可以手动观察两者的变化并在需要时更新值。

这是对指令的更改：

scope: {
    'ngModel': '=',
    'country': '=',
},
link: function stateSelect( $scope, element, attrs ) {
    $scope.states = null;
    $scope.state = { 'code': undefined };

    function loadCountryStates( countryCode ) { ... }

    $scope.$watch( 'country', loadCountryStates );

    // watch manual change on select
    $scope.$watch( 'state.code', function( stateCode ) {
        $scope.ngModel = stateCode;
    } );

    // watch further changes to the model
    $scope.$watch( 'ngModel', function( stateCode ) {
        if ( stateCode ) {
            $scope.state.code = stateCode;
        }
    } );
}

这是对模板的更改：

<select ng-model="state.code" ng-options="s.code as s.name for s in states">
</select>

请注意，现在将select链接到指令的state.code ，然后通过ngModel监视并与controllers属性同步。

我不知道为什么原来的方法行不通！

Answer 2

您可以创建一个initStateTo参数，设置该参数时将初始化指令中的状态值。

     $scope.info.initStateTo = "CA";

     <state-select ng-model="info.stateCode" country="info.countryCode" 
              initStateTo="info.initStateTo">

            $scope.ngModel = undefined;
            locationService.getCountryStates( countryCode ).then (
                function getStates( states ) {
                   $scope.states = states;
                   if($scope.initStateTo) {
                      $scope.ngModel = $scope.initStateTo;
                      $scope.initStateTo = undefined;
                   }
                 } );