角度指令我们如何传递绑定属性

Question

假设我们有一个内部有ng重复的自定义指令：

//...    
<div class="item" ng-repeat="item in items" data-value="{{item.id}}">
        {{item.name}}
    </div>
//...

来电者是：

<dropdown items="assetTypesData"></dropdown>

问题是我们如何将{{item.name}}和{{item.id}}的name和id传递给指令：

<dropdown items="assetTypesData" text="name" value="id"></dropdown>

Answer 1

使用隔离作用域，您可以传入所需的三样东西：items、text、id。然后在模板中，引用{{item[text]}}来获取为text传入的属性（此示例中的名称），并引用{{item[value]}}来获取项的value属性（例如id）。

angular.module('myApp', [])
  .controller('MainController', function ($scope) {
    var vm = {};
    $scope.vm = vm;
  
    activate();
  
    function activate() {
      var items = [];
      for (var i = 0; i <= 15; ++i) {
        items.push({id: i, name: 'Item ' + i});
      }
      
      vm.items = items;
    }
  })
  .directive('myDropdown', function () {
    var template = '<div class="item" ng-repeat="item in items" data-value="{{item[value]}}">' +
        '{{item[text]}}' +
    '</div>';
  
    return {
      restrict: 'E',
      template: template,
      scope: {
        items: '=',
        text: '@',
        value: '@'
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainController">
  <my-dropdown items="vm.items" text="name" value="id"></my-dropdown>  
</div>