Angular Directive How can we pass binding attr - angularjs

Question

Assuming that we have custom directive which have ng-repeat inside:
//...
<div class="item" ng-repeat="item in items" data-value="{{item.id}}">
{{item.name}}
</div>
//...
And the caller is:
<dropdown items="assetTypesData"></dropdown>
Question is how can we pass name and id of {{item.name}} and {{item.id}} to directive as:
<dropdown items="assetTypesData" text="name" value="id"></dropdown>

Answer 1

Using isolate scope, you can pass in the three things you need: items, text, id. Then in your template, reference the {{item[text]}} for getting the property passed in for text (name in this exmaple) and {{item[value]}} to get the value property on the item (e.g. 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>