angularjs - 不使用 ng-repeat 的数组指令

Question

我再次偶然发现性能缓慢，ng-repeat并且无法弄清楚如何构建一个指令，该指令将在不使用ng-repeat任何地方（甚至在模板中）的情况下呈现元素数组

那么，你们是怎么做到的呢？

即使我遍历数组，对每个元素都使用模板：

.directive('foo', function($parse, $compile) {
    return {
        restrict: 'E',
          scope: { items: '=myarray' },
            link: function (scope, element, attrs){
                 var tmplt = '<div> {{name}} </div>';
                 scope.items.forEach(function(){
                     element.append(tmplt(scope)); 
                     // now I'd like to have a scope of that element, 
                     // and pass it into the template, and use properties related 
                     // only to that element
                     // but I don't know how to get a scope for a child element
                  });

             scope.$watch(attrs.myarray, function(value) { console.log('something change'); })

            }
        }});

如果我选择为所有元素使用一个模板，那么我别无选择，只能ng-repeat在其中使用它，它将创建 ngRepeatWatchers 并且一切都会再次变慢。

Answer 1

虽然我同意@Mark，但这是您问题的肮脏解决方案：

http://plnkr.co/edit/wxM8mSoNsRGXBJUao5Xb?p=preview

这个想法是创建孤立的子范围：

              scope.items.forEach(function(item){                     
                 var childScope = scope.$new(true);                     
                 angular.extend(childScope, item);
                 element.append($compile(tmplt)(childScope)); 
              });

并且不要忘记在每次刷新时删除这些子范围。

并且需要对该解决方案进行基准测试，以查看它是否更快以及与 ngRepeat 相比多少。