Question

我是Angular的新手，所以如果这很简单，我会道歉。

我有一个有效的应用程序，其中有多个位置，用户必须首先从国家/地区列表中选择一个国家/地区，然后选择一个区域。我已经有了每个国家的国家列表和地区列表。如果系统没有所选国家/地区的任何区域，则区域选择器将成为纯文本框。

效果很好，但我有8个不同的地方，我需要这个功能。例如，该应用程序要求出生地和死亡地点。

似乎我应该将此功能放入指令中，但我发现的所有示例都是从模型中传入单个字段（即.ng-model =＆＃39; country＆＃39;）或整个范围对象。我需要为指令的每个实例传入模型的特定国家和地区字段。

我该怎么做？

这是我现在拥有的一个例子。如何将其转换为单个“国家/地区”选择器＆＃39;指令，所以我可以重复使用它，而不是基本上复制和粘贴它。

<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

国家/地区的角度指令

2 个答案: