Question

我有一个＆＃34;州选择＆＃34;指令，使用基于countryCode的状态列表填充select元素。该指令监视countryCode上的更改，以更新提供给ng-options的属性。

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

在我加载选项后，如何确保选择确实选择了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;
                   }
                 } );

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

2 个答案: