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