Javascript 转移编译时

根据《角度开发者指南》：

transclude—编译元素的内容并使其可用于指令

---

在编译内容时是否可以更改？出于性能原因，我希望将内容传递给一个指令，我希望该指令使用正确的作用域（父级）进行编译，但仅当/如果发生某个事件。可能吗？如果没有，有没有其他方法可以做到这一点？

我这样做是为了确保在事件发生之前不会将转包内容插入DOM，尽管我不能100%确定实际编译发生的时间。它看起来像这样（使用jQuery）：

app.directive（'thumbnail'，function（）{
返回{
替换：正确，
是的，
模板：“单击以显示。\n”+
"",
控制器：函数（$scope、$transclude、$element）{
$element.find（'.clicker'）。一次（'click'，function（）{
$（this.hide（）；
var clone=$transclude（）；
$element.find（'.placeholder'）.append（克隆）；
});
})
};
});

---

为了防止其他人和我有同样的问题，我已经加入了我所做的事情的简化版本。此指令是一个可扩展/可折叠的部分，包含转包内容。出于性能原因，它在需要时才编译转写的内容，在本例中，只有在第一次扩展该节时才会编译转写的内容。扩展后，内容成为DOM的一部分，不再需要再次编译/转置。这个指令的大部分应该是非常基本和自我解释的，但是controller属性是我过去没有使用过的

您还会注意到，我没有使用compile或link属性。对于这个基本指令，当指令本身被编译时，我不需要做任何DOM操作，因此将所有内容都粘贴到控制器中就可以了。只是澄清一下，指令中运行的顺序是编译、链接，然后是控制器中的任何内容。控制器允许您访问编译/链接函数中可以使用的所有内容，因此为了简单、可读性和可维护性，我将所有内容都放在了那里

我希望这能帮助像我这样的人。很高兴听到你的评论

uiComponentsModule.directive('CollapsibleSection', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        replace: true,
        transclude: true,
        scope: {
            sectionTitle:'@',
            sectionId:'@',
            startExpanded:'@'
        },
        template:   '<div>' +
                        '<div ng-click="toggle()" class="collapsible-section-header">' +
                            '<span class="collapsible-section-title"</span>' +
                        '</div>' +
                        '<div class="collapsible-section" ng-show="isExpanded">'+
                            '<div class="transclude-me"></div>'+
                            '<div class="div-clear"></div>'+
                        '</div>' +                      
                    '</div>',
        controller: ['$scope', '$element', '$attrs', '$transclude', function (scope, element, attrs, $transclude) {
            scope.isExpanded = false;
            scope.isLoaded = false;
            scope.toggle = function(){
                if(scope.isExpanded)
                    scope.close();
                else
                {
                    scope.open();
                }
            };

            scope.showTransclude = function(){
                $transclude(function(clone) {
                    element.find(".transclude-me").append(clone);
                });
            };

            scope.open = function(){
                scope.isExpanded = true;
                if(!scope.isLoaded)
                {
                    scope.showTransclude();
                    scope.isLoaded = true;
                }
            };

            scope.close = function(){
                scope.isExpanded = false;
            };
        }]
    }
}

uiComponentsModule.directive（'collapsablesection'，['$timeout'，function（$timeout）{
返回{
限制：“A”，
替换：正确，
是的，
范围：{
章节标题：“@”，
节ID:“@”，
startExpanded:“@”
},
模板：“”+
'' +
“如果你不太着急，请稍候。我目前在各地都使用ui if来完成相同的事情，但我需要它在转置中发生。这个指令不知道它在转置什么，所以我不能将它放在模板中……close是从哪里来的？如果你是说
克隆
，它来自对
$trans的调用。”包括注入控制器功能的
。文档将其描述为“预先绑定到正确转换范围的转换链接功能”太好了，非常感谢。这给了我一些东西可以继续，但我怀疑它仍然不能让我控制编译时间，只是转换时间…我会看看我是否能解决它。+1的努力和帮助。你可以使用一个自定义的
编译
函数为你的指令，它获取内部HTML并保存它，然后em将其删除，然后在事件发生时手动使用
$compile
服务编译HTML——几乎就像手动转换一样。
uiComponentsModule.directive('CollapsibleSection', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        replace: true,
        transclude: true,
        scope: {
            sectionTitle:'@',
            sectionId:'@',
            startExpanded:'@'
        },
        template:   '<div>' +
                        '<div ng-click="toggle()" class="collapsible-section-header">' +
                            '<span class="collapsible-section-title"</span>' +
                        '</div>' +
                        '<div class="collapsible-section" ng-show="isExpanded">'+
                            '<div class="transclude-me"></div>'+
                            '<div class="div-clear"></div>'+
                        '</div>' +                      
                    '</div>',
        controller: ['$scope', '$element', '$attrs', '$transclude', function (scope, element, attrs, $transclude) {
            scope.isExpanded = false;
            scope.isLoaded = false;
            scope.toggle = function(){
                if(scope.isExpanded)
                    scope.close();
                else
                {
                    scope.open();
                }
            };

            scope.showTransclude = function(){
                $transclude(function(clone) {
                    element.find(".transclude-me").append(clone);
                });
            };

            scope.open = function(){
                scope.isExpanded = true;
                if(!scope.isLoaded)
                {
                    scope.showTransclude();
                    scope.isLoaded = true;
                }
            };

            scope.close = function(){
                scope.isExpanded = false;
            };
        }]
    }
}