Использование угловой директивы в md-virtual-repeat

Question

Я пытаюсь реализовать Виртуальный повтор углового материала с помощью настраиваемой директивы для элементов списка, и у меня возникают проблемы с привязкой к этой директиве.

Вот что у меня есть:

HTML

<md-virtual-repeat-container id="vertical-container"> 
    <div md-virtual-repeat="item in ctrl.dynamicItems"> 
    <foo bar="item"></foo> 
    </div> 
</md-virtual-repeat-container> 

JS

myApp.directive("foo", function(){ 
    return { 
     restrict: "E", 
     scope: { 
     bar: "=" 
     }, 
     template: "<span>{{baz}}</span>", 
     link: function(scope){ 
     scope.baz = "new " + scope.bar; 
     } 
    } 

Выпуск

Элементы в разделе виртуальной прокрутки, кажется, есть, но их значение отображается как new undefined, когда я ожидаю, что они будут новые 1, новые 2 и так далее.

Самое странное в том, что некоторые элементы появляются, чтобы показать их значения правильно (а именно, новый 11, новый 12, а иногда новый 13). Кроме того, проблема будет решена, если вместо этого заменить шаблон моей директивы на "<span>{{bar}}</span>", который считает ненужной функцию ссылки директивы. Это заставляет меня думать, что проблема связана с временем привязки (было бы моим лучшим предположением).

Для получения более подробной информации свяжитесь с corresponding CodePen snippet.

Любые идеи?

Answer 1

Наконец решил ее - CodePen

JS

.directive("foo", function(){ 
    return { 
     restrict: "E", 
     scope: { 
     bar: "=" 
     }, 
     template: "<span>{{test()}}</span>", 
     link: function(scope){ 
     scope.test = function() { 
      if (angular.isDefined(scope.bar)) { 
      return "new " + scope.bar; 
      } 
     } 
     } 
    }