加載ng-options前更新模型時的選擇選項

Question

我有一個「狀態選擇」指令，用一個基於countryCode的狀態列表填充select元素。該指令監視countryCode上的更改以更新提供給ng選項的屬性。

我現在想從我的控制器設置model.countryCode和model.sateCode，但是當countryCode更改時填充狀態選擇時，在選項獲得加載的機會之前更新模型值。

我怎樣才能確保select加載選項後，選擇在其ng模型中引用的選項？

這裏是我的指令：

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