javascript - 如何在 angularjs 中将对象字段作为指令参数传递？

Question

我想将对象数组传递给指令，并让它打印出我在使用该指令的地方确定的字段。

示例如下:

//directive
app.directive('MyDirective', function() {
  return {
    restrict: 'A',
    templateUrl: 'my-directive.html',
    scope: {
      items: '@',
      field: '@'
    }
  };
});

// my-directive.html template
<div ng-repeat="item in items">{{ item.field }}</div>

我的想法是我可以将它与任何像这样的对象一起使用:

// object arrays
var phones = [{id:1,number:'555-5555'}, {id:2,number:'555-6666'}];
var persons = [{id:1,name:'John'}, {id:2,name:'Jane'}];


// directive usage
<div my-directive items="phones" data-field="???number???"></div>
<div my-directive items="persons" data-field="???name???"></div>

结果应该打印出数字和名称。这在 Javascript 中可行吗？

Answer 1

您可以，只需用“=”绑定(bind)项目即可:

.directive('myDirective', function() {
  return {
    restrict: 'A',
    template: '<div ng-repeat="item in items">{{ item[field] }}</div>',
    scope: {
      items: '=',
      field: '@'
    }
  };
})

然后像这样使用它:

<div my-directive items="phones" field="number"></div>

查看此plunker .