Javascript AngularJS:$compile和嵌套的ng repeat

我创建了一个简单的指令，其行为类似于可折叠面板

在本指令的内容中，我们添加了将作为ng repeat模板的项模板。 访问每个数据源项时一切正常，但当模板本身也有一个ng repeat时就不行了

下面是一个演示：

您可以看到，即使是静态数据子对象ng repeat也无法正确编译

以下是指令：

  app.directive('collapsible', ['$compile', function($compile) {
    return {
      restrict: 'A',
      scope: {
        srcData: "=ngModel"
      },
      link: function($scope, $element){

        // Extract the item template from the directive content
        var children = $element.children();

        // Wrap the item template with the repeater
        var template = angular.element('<div ng-repeat="item in srcData"></div>');
        template.append(children);

        var cfn = $compile(template);   // compile
        cfn($scope);                    // attach the scope
        $element.html(template);        // add it back to the directive content

        $element.on('click', 'h3 .button', function(e){
          e.stopPropagation();

          var $this = $(this);
          if($this.hasClass('close')){
              $scope.srcData.splice($this.scope().$index, 1);
              $scope.$apply();
          }
        });

        $element.on('click', 'h3', function(e){
          e.stopPropagation()

          var $this = $(this);
            $(this).next('div').toggle();
        });

      }
    };

  }]);

app.directive（'可折叠'，['$compile'，函数（$compile）{
返回{
限制：“A”，
范围：{
srcData:“=ngModel”
},
链接：函数（$scope$element）{
//从指令内容中提取项模板
var children=$element.children（）；
//使用repeater包装项目模板
变量模板=角度元素（“”）；
模板。追加（子项）；
var cfn=$compile（模板）；//compile
cfn（$scope）；//附加作用域
$element.html（模板）；//将其添加回指令内容
$element.on（'click'，'h3.button'，函数（e）{
e、 停止传播（）；
var$this=$（this）；
if（$this.hasClass（'close'））{
$scope.srcData.splice（$this.scope（）.$index，1）；
$scope.$apply（）；
}
});
$element.on（'click'，'h3'，函数（e）{
e、 停止传播（）
var$this=$（this）；
$（this.next（'div'）.toggle（）；
});
}
};
}]);

啊！明白了

因此，问题不在于嵌套的ng repeat，而在于指令中的模板概念

我需要用

包装模板，只是为了告诉angular暂时不要使用它

以下是正在运行的指令代码：

  app.directive('collapsible', ['$compile', function($compile) {
    return {
      restrict: 'A',
      scope: {
        srcData: "=ngModel"
      },
      link: function($scope, $element){

        // Extract the item template from the directive content
        var children = $element.find('script').html();

        // Wrap the item template with the repeater
        var template = $('<div ng-repeat="item in srcData"></div>');
        template.append(children);

        var cfn = $compile(template);   // compile
        cfn($scope);                    // attach the scope
        $element.html(template);        // add it back to the directive content

        $element.on('click', 'h3 .button', function(e){
          e.stopPropagation();

          var $this = $(this);
          if($this.hasClass('close')){
              $scope.srcData.splice($this.scope().$index, 1);
              $scope.$apply();
          }
        });

        $element.on('click', 'h3', function(e){
          e.stopPropagation()

          var $this = $(this);
            $(this).next('div').toggle();
        });

      }
    };

  }]);

app.directive（'可折叠'，['$compile'，函数（$compile）{
返回{
限制：“A”，
范围：{
srcData:“=ngModel”
},
链接：函数（$scope$element）{
//从指令内容中提取项模板
var children=$element.find（'script'）.html（）；
//使用repeater包装项目模板
变量模板=$（''）；
模板。追加（子项）；
var cfn=$compile（模板）；//compile
cfn（$scope）；//附加作用域
$element.html（模板）；//将其添加回指令内容
$element.on（'click'，'h3.button'，函数（e）{
e、 停止传播（）；
var$this=$（this）；
if（$this.hasClass（'close'））{
$scope.srcData.splice（$this.scope（）.$index，1）；
$scope.$apply（）；
}
});
$element.on（'click'，'h3'，函数（e）{
e、 停止传播（）
var$this=$（this）；
$（this.next（'div'）.toggle（）；
});
}
};
}]);

你能给我看一下HTML吗？我不明白如何用“文本/ng模板”包装内部内容