javascript - 指令模板中的动态字段(angularjs)

Question

我想使用绑定(bind)到对象的自定义指令，但我想指定模板中使用的字段。以前，我使用的是 {{item.Name}}，但我想绑定(bind)到任何对象，指定显示字段。

这就是我所拥有的

var foo = function () {
    return {
        restrict: 'E',
        scope: {
            items: '='
        },
        template:
        "<div class='holder'>"
          + "<a data-ng-repeat='item in items' data-ng-click='myClick(item)'><i class='fa fa-times'/>{{item.Name}}</a>"
          + "</div>",


        controller: function ($scope) {......}
      }
}

我想这样做:

var foo = function () {
    return {
        restrict: 'E',
        scope: {
            items: '=',
            display_field: 'Name',
            icon_field: 'fa fa-times',
        },
        template:
        "<div class='holder'>"
          + "<a data-ng-repeat='item in items' data-ng-click='myClick(item)'><i data-ng-class='{{item.icon_field}}'/>{{item.display_field}}</a>"
          + "</div>",


        controller: function ($scope) {......}
      }
}

其中显示字段和图标可以这样指定:

<foo items="myItems" display_field="OtherProperty" icon-field="iconProperty" />

fiddle : http://jsfiddle.net/1L7tdd1p/

Answer 1

你很接近。请记住， Angular 表达式是 Javascript 表达式的子集。要使用动态属性名称访问属性，请使用方括号表示法:

{{ item[display_field] }}

任何值都可以是对象的键，而不仅仅是字符串。括号表示法允许您使用任何表达式作为键来访问对象的属性:

var obj = {};
obj[1] = 'a';
obj.asdf = 'b';
obj[{}] = 'c';
console.log(obj[1], obj['asdf'], obj[{}]);

此外，我认为您误解了 scope 选项的目的。 scope 选项允许您指定指令将从使用它的元素中获取的一组绑定(bind)以及该绑定(bind)的类型。您不能用它设置默认值。看看Use of symbols '@', '&', '=' and '>' in custom directive's scope binding: AngularJS .

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
  $scope.name = 'Superhero';
}

myApp.directive('foo', function() {
  return {
    restrict: 'E',
    scope: {
      items: '=',
      prop: '@' // this declared a
    },
    template: " <a data-ng-repeat='item in items'><br/>{{item[prop]}}</a>",

    controller: function($scope) {}
  }

});

myApp.controller("appController", function($scope) {
  $scope.Items = [{
    "id": 1,
    "name": "aaaa"
  }, {
    "id": 2,
    "name": "bbbb"
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app='myApp' ng-controller="appController">
  <foo items="Items" prop='name'></foo>
</div>