Question

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

这就是我所拥有的

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) {......}
      }
}

可以像这样指定display_field和icon：

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

小提琴： http://jsfiddle.net/1L7tdd1p/

Answer 1

你很亲密。记住角度表达式是Javascript表达式的子集。要使用动态属性名称访问属性，请使用括号表示法：

u'\u2640'

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

{{ item[display_field] }}

此外，我认为你误解了var obj = {}; obj[1] = 'a'; obj.asdf = 'b'; obj[{}] = 'c'; console.log(obj[1], obj['asdf'], obj[{}]);选项的目的。 scope选项允许您指定一组绑定，指令将从您使用它的元素中获取绑定，以及此绑定的类型。您无法使用它设置默认值。看看here。

scope

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

指令模板中的动态字段（angularjs）

1 个答案: