angularjs失去了dom和范围之间的绑定

Question

我正在编写一个非常类似于ng-repeat的指令，但有些不同。 我正在创建多个documentFragments并将transcludeFn（clone）输出附加到许多documentFragments之一。在迭代结束时，我将这些documentFragments附加到父元素。

现在，我不是在寻找这个指令的替代品。我非常清楚我可以在我的指令模板中使用多个ng-repeat，而无需自己创建dom元素。

元素以各自的范围呈现。一切看起来都不错，但是 问题是，当我将clone元素（transclude函数输出）添加到documentFragments并因此将它们添加到dom树时，angular会错过dom元素与其范围之间的链接。

angular.element（createdDomElement）.scope（）返回父范围，而不是createdDom自己的范围。

更新 我发现由于某种原因，在渲染视图后，创建的dom元素上的ng-scope类消失了！

.directive('itemGrid', ['$window', function ($window) {
     return {
        transclude: 'element',
        priority: 1000,
        terminal: true,
        compile: function compile($elem, $attrs, linker) {
           return function (scope, elem, attrs) {
              var attrData = attrs.itemGrid,
                 match = attrData.match(/^\s*(.+)\s+in\s+(.*?)\s*(\s+track\s+by\s+(.+)\s*)?$/),
                 indexString = match[1],
                 collection = scope.$eval(match[2]);

             drawGrid = function (numberOfColumns) {
                 columns = Array.apply(null, new Array(numberOfColumns)).map(function () {
                    return  document.createDocumentFragment(); // row fragments
                 });

                 var cloneIt = function (clone) {
                    columns[columnIndex].insertBefore(clone[0], null);
                 };
                 for (i = 0; i < collection.length; i++) {
                ------   calculate columnIndex------
                   var newScope = scope.$new();
                    newScope[indexString] =collection[i];
                    linker(newScope, cloneIt);
                 }
                 columnsFragment = document.createDocumentFragment();
                 for (i = 0; i < columns.length; i++) {
                    column = document.createElement('ul');
                    column.className = columnClasses;
                    column.appendChild(columns[i]);
                    columnsFragment.appendChild(column);
                 }
                 elem.parent()[0].appendChild(columnsFragment);
              };
            }