Can we use ng-transclude inside $compile?

3
votes

Can we have compile ng-transclude in directive as mentioned below. I am getting Error:

[ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element:

my code: 

ngApp.directive("floater", ['$compile', function($compile) { 
    return { 
        restrict: "E", 
        replace: true, 
        transclude: true, 
        require: 'nuTitle', 
        scope: { 
            nuTitle: "=", 
            onMinimize: "&"
        }, 
        template: "<div></div>", 
        link: function(scope, element, attrs) { 
            var template = "<div class='floater'>" + 
                              "<div class='content'>" + 
                              ...
                              "<div class='clearfix' ng-transclude></div>" + 
                              ...
                            "</div>" + 
                           "</div>"; 
            templateObj = $compile(template)(scope); 
            element.append(templateObj); 
        }
    };
}]);
1
angularjsangularjs-directive

1 Answers

0
votes

The problem is similar to this

A possible solution is to change these lines:

template: "<div ng-transclude></div>",
compile: function compile ( element, attrs) {
    var template = "<div><div>"+element.html()+"</div></div>";

    element.html(template);
}

http://jsfiddle.net/qbt0rsek/2/

In this way you avoid the error