Angular指令國家/地區

Question

我對Angular很陌生，所以我很抱歉，如果這很簡單。

我有一個工作應用程序，有多個地方，用戶必須首先從國家列表中選擇一個國家，然後從選擇區域中選擇一個國家。我已經有每個國家的國家名單和地區名單。如果系統沒有選定國家的區域，則區域選擇器將變爲純文本框。

它運行良好，但我有8個不同的地方，我需要這個功能。例如，該應用程序要求出生地和死亡地點。

看起來我應該把這個功能放到一個指令中，但是我發現的所有例子都是從模型中傳入一個單獨的字段（即ng-model ='country'）或整個範圍對象。我需要爲模型的每個實例傳遞模型的特定國家和地區字段。

我該怎麼做？

這是我現在擁有的一個例子。我怎樣才能把它變成一個單一的「國家/地區選擇器」指令，以便我可以重複使用它，而不是基本上覆制並粘貼到所有地方。

<div class="form-group"> 
    <label for="birth_country" class="col-sm-3 control-label">Birth Country</label> 
    <div class="col-sm-9"> 
     <select id="birth_country" ng-model="person.birth_country" ng-options="country.text as country.text for country in country_options" class="form-control" ng-change="getBirthRegions(person.birth_country)" ></select> 
    </div> 
</div> 

<div class="form-group"> 
    <label for="birth_region" class="col-sm-3 control-label">Birth State/Region</label> 
    <div class="col-sm-9"> 
     <input id="birth_region" type="text" ng-model="person.birth_region" class="form-control" placeholder="Enter the birth state/region" ng-hide="birth_region_options.length > 0" /> 
     <select id="birth_region" ng-model="person.birth_region" ng-options="region.text as region.text for region in birth_region_options" class="form-control" ng-show="birth_region_options.length > 0"></select> 
    </div> 
</div> 

<div class="form-group"> 
    <label for="death_country" class="col-sm-3 control-label">Death Country</label> 
    <div class="col-sm-9"> 
     <select id="death_country" ng-model="person.death_country" ng-options="country.text as country.text for country in country_options" class="form-control" ng-change="getDeathRegions(person.death_country)" ></select> 
    </div> 
</div> 

<div class="form-group"> 
    <label for="death_region" class="col-sm-3 control-label">Death State/Region</label> 
    <div class="col-sm-9"> 
     <input id="death_region" type="text" ng-model="person.death_region" class="form-control" placeholder="Enter the death state/region" ng-hide="death_region_options.length > 0" /> 
     <select id="death_region" ng-model="person.death_region" ng-options="region.text as region.text for region in death_region_options" class="form-control" ng-show="death_region_options.length > 0"></select> 
    </div> 
</div> 

Answer 1

您傳入的單個字段可以是JavaScript對象。

所以你所要做的就是在你的輸入上使用類似ng-model="addressLocation.country"和ng-model="addressLocation.region"的東西。

然後使用單個對象在你的指令：my-directive="addressLocation"

編輯：

要獲得關於創建實際的指令編輯的問題，它看起來像你需要了解如何創建指令讀了here。

你要做的是創建一個你可能想用作元素的指令，可能將你的模板HTML移動到一個外部HTML文件中，並在指令中使用templateUrl，並使用隔離範圍（可能）在其上的多個變量。

一個例子：

.directive('countryRegionSelector', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      model: '=', 
      label: '@' 
     }, 
     templateUrl: 'country-region-selector.html', //This contains your HTML 
     link: function(scope) { 
      scope.$watch('model.country', function(newVal, oldVal) { 
       //Your get____Regions() here 
      } 
      scope.country_options = [...]; 
      scope.region_options = []; 
     } 
    } 
}); 

模板將是這個樣子：

<div class="form-group"> 
    <label for="country-{{label}}" class="col-sm-3 control-label">{{label}} Country</label> 
    <div class="col-sm-9"> 
     <select id="country-{{label}}" ng-model="model.country" ng-options="country.text as country.text for country in country_options" class="form-control"></select> 
    </div> 
</div> 

<div class="form-group"> 
    <label for="region-{{label}}" class="col-sm-3 control-label">{{label}} State/Region</label> 
    <div class="col-sm-9"> 
     <input id="region-{{label}}" type="text" ng-model="model.region" class="form-control" placeholder="Enter the birth state/region" ng-hide="region_options.length > 0" /> 
     <select id="region-{{label}}" ng-model="model.region" ng-options="region.text as region.text for region in region_options" class="form-control" ng-show="region_options.length > 0"></select> 
    </div> 
</div> 

而且使用它是這樣的：

<country-region-selector model="person.birth" label="Birth"> 
<country-region-selector model="person.death" label="Death"> 

注：這不是招」沒有經過測試，只是現在作爲一個生產者而寫下了我的頭頂您可以使用的模板

Answer 2

如果您在其中聲明範圍，則可以將對象傳遞給指令。在我的示例指令中，可以傳入國家和選擇國家和地區的對象列表。所以，當你使用該指令，你只是通過在控制器的值：

<div ng-controller="Origin as originCtrl"> 
    <p>Selected country: {{ originCtrl.selected.country }}</p> 
    <div select-origin countries="originCtrl.countries" selected="originCtrl.selected"></div> 
</div> 

然後你可以再補充一個選擇的地區，把你的getRegions功能，可以在其中注入一個服務指令。

angular.module('application', []) 
    .controller('Origin', function($scope) { 
    this.countries = ['France', 'Russia', 'China']; 

    this.selected = { 
     country: null, 
     region: null 
    } 
}) 
.directive('selectOrigin', function(){ 
    return { 
    restrict: 'A', 
    scope: { 
     countries: '=', 
     selected: '=' 
    }, 
    template: '<select ng-options="country for country in countries" 
       ng-model="selected.country"></select>' 
    }; 
}); 

而且這裏是Plunkr