Javascript 通过角度指令在html模板中迭代配置数组？

我最近进入了AngularJS，试图创建一个注册表单，在这里我可以从其他地方广泛使用的JavaScript配置中填写国家列表，因此我将其作为JS对象保存

我一直试图在我的select输入中使用ng repeat start和*-end，但失败了

主要问题是，如何加载countries数组并在模板中迭代它

编辑：2014年11月30日-更好的示例

HTML:

国家
{{credentials.country}

文件：

/public/directions/countrySelector.directive.js

指令内容：

.directive('selectCountry', ['countries', function (countries) {
  var directive = {
    template: '<select ng-options="country[1] as country[0] for country in countries"' +
              '        ng-model="ngModel">' +
              '</select>',
    link: link,
    scope: {
      ngModel: '='
    }
  };

  return directive;

  function link (scope, element, attrs) {
    scope.countries = countries;
  }
}]);

“严格使用”；
角度.module（'app'，[]）
.价值（'国家'[
{名称：'Afghanistan'，代码：'AF'}，
{名称：'Åland Islands'，代码：'AX'}
])
.指令（'selectCountry'，['countries'，功能（国家）{
功能链接（范围、元素、属性）{
范围.国家=国家；
}
返回{
模板：“”+
'',
链接：链接，
范围：{
credentialsCountry:“=”
}
};
}]);

为可以普遍重用的东西创建指令是个好主意，比如国家选择器。您希望将您的

国家/地区

注入指令，然后使用

ng选项

对其进行迭代。普朗克：

.directive（'selectCountry'，['countries'，函数（国家）{
var指令={
模板：“”+
'',
链接：链接，
范围：{
ngModel:“=”
}
};
返回指令；
功能链接（范围、元素、属性）{
范围.国家=国家；
}
}]);

只需将

国家[0]

和

国家[1]

替换为

国家。代码和
国家。名称


或者我遗漏了什么？
我认为您不需要为此制定新的指令。对于angular，已经有一个内置的select指令，因此您需要为自己做更多的工作。因此，可以将该服务注入页面的控制器中，然后将该服务绑定到控制器的作用域，就像您对指令所做的那样。它最终会看起来像：

app.controller('whateverTheControllerIs', ['countries', '$scope', function (countries, $scope) {
    $scope.countries = countries;
});

你有一个控制器

<div class="form-group">
    <label for="phone">Country</label>
    <select ng-options="country.name for country in countries" ng-model="credentials.country"></select>
    <pre>{{credentials.country}}</pre>
</div>

然后，模板就可以使用您的范围


国家
{{credentials.country}

作为旁注：如果您想了解最新Angular 1.*版本的最佳实践。阅读Todd箴言中的所有内容。
这方面的缺点是，平均堆栈示例使用$scope.credentials对象发送注册表，因此我无法将我的国家/地区和电话代码选择器集成到凭据中，因为它们在不同的时间加载，并且无法发送选择数据..：（不完全清楚您的意思。如果表单数据在对象
$scope.credentials
中，您只需将国家/地区选择器的
ng model
设置为
credentials.country
或类似。您有代码示例吗？您可以看到原始帖子中提供的新示例。谢谢！我想为此创建一个指令。）完全没有必要。您实际上只是将服务绑定到模板（一个非常简单的模板）。您是否正在寻找一个答案，允许您将
国家/地区
数组保存在项目的一个单独文件中？一个可以通过AJAX请求并异步加载的文件？是的，也是。除了通过controllerMy将其正确加载到凭据范围之外，主应用程序模块称为“信号”，我向它注册了我的值数组使用
angular.module（'signals'，[]）.value（'countries'，[…]）；
，使其对每个控制器全局可用，但它会引发一个错误：
错误：[$injector:unpr]未知提供程序：countriesProvider Fratyr，与指令中的方式相同：不，它从不加载。Grunt确实监视此文件，但Angular从未找到它。我尝试在作用域之前和之后要求它。将其放置在应用程序模块和尝试使用它的模块下。运气不好。尝试此：
Angular.module（'users'）。值（'Countries'，[]）
也尝试了
angular.module（'signals'）
//主模块，然后在控制器中需要它。运气不好：/See my Plunker:谢谢，这帮助我解决了显示问题，现在的问题是正确注册它！：）
angular.module('app', [])
.value('countries', [
    {name: 'Afghanistan', code: 'AF'},
    {name: 'Åland Islands', code: 'AX'}
]);

app.controller('whateverTheControllerIs', ['countries', '$scope', function (countries, $scope) {
    $scope.countries = countries;
});

<div class="form-group">
    <label for="phone">Country</label>
    <select ng-options="country.name for country in countries" ng-model="credentials.country"></select>
    <pre>{{credentials.country}}</pre>
</div>