Как создать привязанные к объекту вкладки в AngularJS с использованием единой директивы и настраиваемого поля ярлыков для каждой вкладки?

Question

Пример на странице AngularJS создает вкладки с использованием двух директив: один для вкладок и один для панелей. Можно ли создать один шаблон и один директиву следующим образом:

HTML:

<div ng-app="components"> 
<tabs objects="someObjects" labelprop="name" shouldbe="the value of object.name"></tabs> 
<tabs objects="someObjects" labelprop="id" shouldbe="the value of object.id"></tabs> 
</div> 

JS:

angular.module('components', []). 
directive('tabs', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: {objects: '=', labelprop: '@', shouldbe: '@'}, 
     controller: function($scope, $element) { 
      $scope.someObjects = [ 
       {name: "One", id: 1, data: 'foo'}, 
       {name: "Two", id: 2, data: 'bar'}, 
       {name: "There", id: 3, data: 'foobar'} 
       ] 
     }, 
     template: 
      '<div class="tabbable">' + 
       '<ul class="nav nav-tabs">' + 
        '<li ng-repeat="object in someObjects">' + 
         '<p>How do I use "labelprop" to get {{shouldbe}}</p>' + 
        '</li>' + 
       '</ul>' + 
      '</div>' 
    } 
}) 

(посмотреть скрипку, иллюстрирующую мой вопрос: http://jsfiddle.net/2GXs5/3/)

От того, что я понимаю до сих пор, потому что ng-repeat - это его собственная директива, она уходит и делает свое дело, и я не могу получить доступ к object, скажем, если бы я хотел сделать это в функции ссылки директивы: scope.label = scope.object['scope.labelprop']

Кроме того, я все еще пытаюсь обернуть мою голову вокруг интерполяции, пересылки и т. Д., Поэтому решение может быть связано с каким-то образом.

Answer 1

Для решения проблемы в демо вы имеете доступ к как повторяющегося элемента и директивы рамки в шаблоне

<p>{{labelprop}} is {{object[labelprop]}}</p> 

Все, что не фильтровать связанные в выражении, не котируется будет рассматриваться в качестве переменной, пока что vriable находится в пределах текущей области

демо: http://jsfiddle.net/2GXs5/4/