2

我正在编写一个与 ng-repeat 非常相似的指令，但有一些区别。我正在创建多个 documentFragment 并将 transcludeFn(clone) 输出附加到多个 documentFragment 之一。在迭代结束时，我将这些 documentFragments 附加到父元素。

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

元素以其各自的范围呈现。最后一切看起来都很好，但问题是，当我将克隆元素（transclude 函数输出）添加到 documentFragments 并因此将它们添加到 dom 树时，角度不知何故错过了 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);
              };
            }
4

0 回答 0