在 md-virtual-repeat 中使用 angular 指令

Question

我正在尝试使用列表项的自定义指令来实现 Angular Material 的虚拟重复，但我在将范围属性绑定到指令时遇到了问题。

这是我的：

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，而我期望它们是 new 1，新2，依此类推。

奇怪的是，有些项目似乎确实正确显示了它们的值（即 new 11、new 12，有时新 13)。此外，如果我将我的指令模板替换为 "<span>{{bar}}</span>" 认为不需要指令的 link 函数，问题就会得到解决。这让我认为问题出在 linking 的时间（这是我最好的猜测）。

这里有一个 link 到 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;
          }
        }
      }
    }

在 md-virtual-repeat 中使用 angular 指令

Using angular directive within md-virtual-repeat

angularjs

angular-material