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

网鹰

我想使用绑定到对象的自定义指令，但我想指定模板中使用的字段。以前，我使用 {{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/

尼库加

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

{{ item[display_field] }}

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

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

此外，我认为您误解了该scope选项的目的。该scope选项让您指定指令将从您使用它的元素中获取的一组绑定，以及此绑定的类型。你不能用它设置默认值。在自定义指令的范围绑定中查看符号 '@'、'&'、'=' 和 '>' 的使用：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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。