Javascript AngularJS：在手动转换后，是否可以编译ng repeat注释？

普朗克：

我正在尝试编写一个标记抽象指令，使用自定义元素包装标签和相应的内容，这些自定义元素在将内容放置在新模板中应该放置的位置时会被丢弃。标签组的内容部分可能包含指令，它们需要成功编译

我唯一似乎无法工作的部分是让转置的dom元素在本例中还没有呈现，ng repeat实际编译。我正在成功地复制ng repeat注释，但是当我尝试运行$compile以使ng repeat编译时，什么都没有发生。如有任何反馈，将不胜感激

---

我开始认为我可能没有正确地处理这个问题。

结果是，我试图在运行compile之前修改转置克隆的dom结构，特别是从其父包装器中删除嵌套的ng repeat注释。由于angular通过父元素维护范围引用，这实际上导致ng repeat的行为与预期一样，因为它没有要重复的范围数据，所以它只是作为注释保留

我提出的解决方案是在transclude函数内运行编译步骤，然后通过在transclude函数外附加节点来修改dom

下面是更新后的代码，它在transclude函数外部以及编译后将已转置的元素追加

---

我认为这些元素仍然需要附加到DOM中，因为您没有返回$compile函数。请尝试$node.append$compilecontentElemscope此处的$node引用有助于遍历转置克隆，因为我需要选择特定节点并提取其内容。我将获取感兴趣的$node，然后将其直接附加到它所属的labelem或contentElem的elem引用中。当模板被替换时，通过.append方法在transclude函数中发生的元素操作实际上在dom中。在本例中，我实际上可以在dom中看到ng repeat指令注释，并可以验证它迭代的$scope属性是否存在，但它不会编译。我能够解决我遇到的问题，并在下面发布了答案。谢谢你的帮助，本！我想那篇文章会有帮助的。你能把修改后的密码寄出去吗？

var app = angular.module("inputGroupApp", []);

app.controller('numbersController', ['$scope', function($scope){

  $scope.data = {}
  $scope.data.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
}]);


app.directive('labelGroup', ['$compile', '$timeout', function($compile, $timeout) {
    return {
      'template'   : '<div class="label-group">' +
                     '<label class="label-group-label"></label>' +
                     '<div class="label-group-content"></div>' +
                     '</div>',
      'restrict'   : 'E',
      'transclude' : true,
      'replace'    : true,
      'link'       : function(scope, elem, attr, nullController, transclude) {

        var labelElem = elem.find('.label-group-label');
        var contentElem = elem.find('.label-group-content');

        transclude(scope, function(clone) {
          var tLabel = null;
          var tContent = null;

          angular.forEach(clone, function(node) {
            var $node = angular.element(node);

            // these nodes have been emptied by gutting their contents
            // is it a memory problem that the nodes themselves aren't destroyed?

            if ($node.is('label-group-label')) {
              tLabel = $node.contents(); 
              labelElem.append(tLabel);
            } else if ($node.is('label-group-content')) {
              tContent = $node.contents();
              contentElem.append(tContent);
            }
          });

          // why doesn't this work? i've tried compiling elem with no success either
          $compile(contentElem)(scope);

          console.log('contentElem ', contentElem);
          console.log('elem ', elem);
        });
      }
    };
  }]);

var app = angular.module("inputGroupApp", []);

app.controller('numbersController', ['$scope', function($scope){

  $scope.data = {}
  $scope.data.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
}]);


app.directive('labelGroup', ['$compile', '$timeout', function($compile, $timeout) {
    return {
      'template'   : '<div class="label-group">' +
                     '<label class="label-group-label"></label>' +
                     '<div class="label-group-content"></div>' +
                     '</div>',
      'restrict'   : 'E',
      'transclude' : true,
      'replace'    : true,
      'link'       : function(scope, elem, attr, nullController, transclude) {

        var labelElem = elem.find('.label-group-label');
        var contentElem = elem.find('.label-group-content');

        var tLabel = null;
        var tContent = null;

        transclude(scope, function(clone) {


          angular.forEach(clone, function(node) {
            var $node = angular.element(node);

            // these nodes have been emptied by gutting their contents
            // is it a memory problem that the nodes themselves aren't destroyed?

            if ($node.is('label-group-label')) {
              tLabel = $node.contents(); 
            } else if ($node.is('label-group-content')) {
              tContent = $node.contents();
            }
          });

          $compile(contentElem)(scope);
          $compile(labelElem)(scope);

        });

      contentElem.append(tContent);
      labelElem.append(tLabel);
      }
    };
  }]);