Question

假设我们有自定义指令，其中包含ng-repeat：

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

来电者是：

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

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

{{item.id}}

Answer 1

使用隔离范围，您可以传递所需的三件事：items，text，id。然后在您的模板中，引用{{item[text]}}获取传入文本的属性（此例子中的名称）和{{item[value]}}以获取项目的值属性（例如id）。

＆＃13;

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: '@'
      }
    }
  });

＆＃13;

<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>

＆＃13;

Angular Directive我们如何通过绑定attr

1 个答案: