在md-virtual-repeat內使用angular directive

Question

我在嘗試使用列表項的自定義指令來實現Angular Material的虛擬重複，並且我遇到了將範圍attrs綁定到指令的問題。

這是我有：

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; 
      } 
     } 
     } 
    }