这里有几点需要注意：

Question

当我想要一个显示事物列表的指令时，我一直把头撞到角上，但我希望它足够通用以处理多个类型/形状的对象。举个简单的例子就说我有

<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>

说实话，我甚至不确定这会有多大作用。我已经看到了ui-select通过使用外部范围所做的事情。也许这是要走的路？ https://github.com/angular-ui/ui-select/blob/master/dist/select.js#L892

但是我觉得我需要喜欢转换，就像ui-select一样。难道没有更简单的方法吗？我是否试图对泛型指令？这不是其他人遇到的问题吗？

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

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

Answer 1

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

＆＃13;

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);
    }
  };

});

＆＃13;

<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>

＆＃13;

Answer 2

这里有几点需要注意：

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

Answer 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>

如果有必要选择任何选项

将数据传递给指令内的ng-repeat指令

3 个答案:

这里有几点需要注意：