【问题标题】：passing data to a directive for ng-repeat inside of the directive将数据传递给指令内的 ng-repeat 指令
【发布时间】：2015-03-30 03:19:37
【问题描述】：

当我想要一个显示事物列表的指令时，我一直在思考角度问题，但我希望它足够通用以处理多种类型/形状的对象。举个简单的例子，假设我有

<select ng-options="person.id by person in people" ng-model="selectPerson">
  <option>
     {{person.name}}
  </option>
</select>

（请记住，这是一个简单的示例，这么简单的东西可能不会从指令中受益）

现在我想把它变成一个叫做cool-select的通用指令我可能会尝试在我的 js 中做这样的事情

//directive coolselect.directive.js
angular.module('mycoolmodule',[]).directive('coolSelect',function(){
    return {
       restrict:'E',
       templateUrl:'js/coolselectdirective/_coolselect.html',//html from example above
       scope:{
             items:'=',
             displayProperty:'@',
             idProperty:'@',
             selectedItem:'='
       },
       link:function(scope,element){
        //do cool stuff in here
       }
   }
});

但接下来就是我开始在嘴里吐一点东西的地方

//html template _coolselect.html
<select ng-model="selectedItem" ng-options="item[scope.idProperty] by item in items">
  <option>      
     {{item[scope.displayProperty]}}
   </option>
</select>

老实说，我什至不确定这是否适用于 Angular。我已经看到 ui-select 通过使用外部作用域做了什么。也许这就是要走的路？ https://github.com/angular-ui/ui-select/blob/master/dist/select.js#L892

但是我想我需要像 ui-select 一样喜欢 transclude。没有更简单的方法吗？我是否试图制定通用指令？这不是其他人遇到的问题吗？

编辑：最后，它看起来像这样是理想的。

<cool-select repeat="person.id by person in people" display-property="name"></cool-select>

【问题讨论】：

您应该将指令用作元素并将其用作类吗？当你把restrict E改成C时，你就可以把它当作一个类来使用了。
对不起类，只是为了表明有与此元素关联的自定义样式。
我把课拿出来让它更清楚

标签： javascript angularjs angularjs-ng-repeat angular-directive

【解决方案1】：

请看下面的演示如何将每个对象从数组传递到 ng-repeater 中的指令

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {


  $scope.people = [{
    name: "John"
  }, {
    name: "Ted"
  }]

});

app.directive('user', function() {

  return {

    restrict: 'EA',
    template: "<p>*name:{{user.name}}</p>",
    scope: {
      user: '='
    },
    link: function(scope, element, attr) {

      console.log(scope.user);
    }
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="homeCtrl">

    <div ng-repeat="person in people" user="person"></div>

  </div>
</div>

【讨论】：

这更接近我正在寻找的内容，请检查我想要做的编辑。
最终想了想觉得这是最好的解决方案，也希望有同样问题的人看到这个解决方案。我认为这提醒人们如何“正确”地组合多个指令的元素。
我必须提出这个问题，因为它帮助我看到了我是多么愚蠢，因为我没有在我的范围数据对象周围加上括号并且不知道为什么它不起作用......荣誉先生

【解决方案2】：

这里有几点需要注意：

通过将ng-repeat 放在select 上，您将重复select。
select 元素有一个用于重复选项的特殊属性，称为ng-options。
您不需要在模板中引用scope，只需引用它的属性即可。在 AngularJS 模板中，scope 是隐含的，实际上这就是 scope 的目的，成为您在其中访问属性的 "scope"。
您没有实例化coolSelect 指令，因为您已将其限制为元素，但您正尝试将其用作类。。李>
如果您想在每次想要重复选项或其他组件时创建一个指令来简化此过程，您将需要使用像item[displayProperty] 这样的语法来使其通用。

【讨论】：

是的，抱歉，我只是在快速编写一个示例，因此代码中存在一些错误，我尝试将其清理以使其更清晰。

【解决方案3】：

为什么你需要在选项标签中使用 displayProperty 自己构建选项 ng-options 可以做得更多

<select
ng-model="myOption"
ng-options="value.id as value.label  for value in myOptions">
<option value="">nothing selected Text</option>
</select>

value.id 是存储在 ngModel myOption 中的值 value.label 是显示的标签

<option value="">nothing selected Text</option>

如有必要，可以选择无选择的选项

【讨论】：