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

Question

我有一个“状态选择”指令，它使用基于国家代码的状态列表填充选择元素。该指令监视 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>

注意选择现在如何链接到指令的state.code，然后通过ngModel 与控制器属性进行监视和同步。

我不知道为什么原来的方法不起作用！

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