Директива с динамическим шаблоном

Question

Предположим, у меня есть директива, которая берет модель и печатает все элементы модели с помощью ng-repeat. Что-то вроде:

(function() { 
    'use strict'; 

    angular 
     .module('myDirective', []) 
     .directive('myDirective', myDirective); 

    function myDirective() { 

     return { 
      restrict: 'E', 
      scope: { 
       mlModel: '=', 
      }, 
      template: '<ul><li ng-repeat="actor in mlModel">{{actor.code}} - {{actor.name}}</li></ul>' 
     }; 
    } 
})(); 

Где-то еще у меня есть модель:

vm.testModel = [{ 
    'code' : 'ABC', 
    'name' : 'A name' 
}, { 
    'code' : 'DCE', 
    'name' : 'Another nane' 
}]; 

и директива используется таким образом:

<my-directive ml-model="vm.testModel"></my-directive> 

Это работает довольно хорошо, и у меня есть PLNKR как демо. Эта директива должна быть использована более чем в одном месте с несколькими иной моделью, например, я должен иметь модель так:

vm.testModel2 = [{ 
    'id' : '34234', 
    'description' : 'A description' 
}, { 
    'id' : '456345', 
    'description' : 'This is another description' 
}]; 

Структура такую ​​же, но теперь code свойство называется id и name недвижимости description. Небольшая разница, вызывающая огромная проблема, поскольку внутри директивы у меня есть жесткая кодировка, как читать модель (т. Е. Я написал {{actor.code}} - {{actor.name}}).

Я бы отправил код для чтения модели в качестве параметра директивы и использовал его внутри шаблона директивы. Что-то вроде:

Возможно ли это? Как я могу это сделать?

Answer 1

Вы можете достичь его в атрибуте compile из директивы, так что добавьте:

compile:function(element,attrs){ 
    element.find('li').append(attrs.mlParser); 
} 

PLNKR пример.

Answer 2

Я немного изменил код директивы, посмотрите:

function myDirective() { 

     return { 
      restrict: 'E', 
      scope: { 
       mlModel: '=', 
      }, 
      link : function(scope, element, attrs){ 
       scope.view = []; 

       scope.mlModel.forEach(function(actor){ 
       scope.view.push({name : actor[Object.keys(actor)[0]], value : actor[Object.keys(actor)[1]]}); 
       }); 
      }, 
      template: '<ul><li ng-repeat="actor in view">{{actor.name}} - {{actor.value}}</li></ul>' 
     }; 
    }