Угловая Директива Как мы проходим связывание атр

Question

Если предположить, что у нас есть пользовательские директивы, которые нг-повтора внутри:

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

И Вызывающий:

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

Вопрос в том, как мы можем передать name и id из {{item.name}} и {{item.id}} директиве как:

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

Answer 1

Используя область выделения, вы можете передать три необходимые вам вещи: предметы, текст, идентификатор. Затем в вашем шаблоне укажите {{item[text]}} для получения свойства, переданного для текста (имя в этом примере) и {{item[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>