Javascript 使用$compile可以克隆自身的Angular指令-非法使用转换

我正在尝试构建一个带有克隆按钮的“图表小部件”指令，该按钮将克隆图表并将其附加到原始图表之后

该指令如下所示：

app.directive("chartWidget", function ($compile) {
    return {
        restrict: "A", 
        transclude: true,
        templateUrl: 'chart-widget-template',
        link: function ($scope, element, attrs) {

            $scope.clone = function () {
                var clone = $compile("chart-widget-template")($scope);
                element.after(clone);
            };
        }
    };
});

模板如下所示：

 <script type="text/ng-template" id="chart-widget-template">
    <section class="widget chart-widget">
        <i ng-click="clone()" class="widget-clone-handle"></i>
        <div class="body no-margin">
            <div ng-transclude></div>
        </div>
    </section>
</script>

 <div data-chart-widget>
    <div data-some-specific-chart-directive></div>
 </div>

使用方法如下：

 <script type="text/ng-template" id="chart-widget-template">
    <section class="widget chart-widget">
        <i ng-click="clone()" class="widget-clone-handle"></i>
        <div class="body no-margin">
            <div ng-transclude></div>
        </div>
    </section>
</script>

 <div data-chart-widget>
    <div data-some-specific-chart-directive></div>
 </div>

起初，我成功地测试了克隆技术在没有转义的情况下是否有效。但是，在混合中添加转换后，克隆它会产生以下错误：

错误：[ngTransclude:孤立]在中非法使用ngTransclude指令 模板！未找到需要转换的父指令。 要素：

$compile的angular docs声明$compile的transcludeFn参数是depracated（我并不知道它是如何工作的），那么我该如何实现这一点呢

为了澄清，我想要原始的转义，即：

<div data-some-specific-chart-directive></div>

要包含在每个克隆中。

这里是一个演示plunker： 您需要使用链接函数aka$transclude的第5个参数：

app.directive("chartWidget", function () {
    return {
        restrict: "A", 
        transclude: true,
        templateUrl: 'chart-widget-template',
        link: function ($scope, element, attrs, ctrl, $transclude) {
            $scope.clone = function () {
                $transclude(function(clone){
                  element.after(clone);  
                });
            };
        }
    };
});

传递给编译函数的transclude函数被取消预测

请参阅此提交：

---

另一个暴徒：

• 使用

  $templateCache.get

  加载模板
• 将

  transcludeFn

  作为第二个参数传递给

  $compile

指令：

app.directive("chartWidget", function ($compile, $templateCache) {
    return {
        restrict: "A", 
        transclude: true,
        templateUrl: 'chart-widget-template',
        link: function (scope, element, attrs, ctrl, $transclude) {
            var template = $templateCache.get('chart-widget-template');
            scope.clone = function () {
                var clone = $compile(template,$transclude)(scope);
                element.after(clone);
            };
        }
    };
});

---

谢谢，这种方法很有效，尽管它只克隆了转载的内容，没有模板。我确信您知道，您已经删除了我对$compile的调用（我想是为了简化它），但我不知道如何恢复我以前克隆整个模板而不仅仅是transclusion@parliament我补充了你的问题：）它很有效，确实回答了问题，所以我会接受它，谢谢你的努力。但是，我仍然存在一个问题，即作用域在每个克隆之间共享，因此更改为一会影响所有克隆。下面是一个例子：。其目的是克隆作用域，但保留单独的引用，以便每个引用可以单独更改。我尝试了angular.copy（作用域，{}），但是它不受显式支持。如果你愿意的话，我可以开始一个新问题：）@parliament这里有一个例子：Ilan我已经在plunkrs、fiddles中成功地复制了你的代码好几次，甚至在一个新项目中。除了我的项目，它在任何地方都有效。出于某种原因，“this.isCollapsed”中的“this”总是指不同克隆的相同范围=\n你知道为什么我在这个问题上撞了几个小时吗