How can I render compiled Transcluded HTML in Angular?

Question

I am trying to render html that represents a custom directive using angular so that I nest divs an arbitrary number of times. When I run the below code I do see the tag properly transcluded and the browser in my output shows literally the string text " ". I would like to compile this into html and render and tried doing below with

$compile(element.contents())(scope);

However this results in console errors regarding an orphaned transclusion as well as errors saying it cannot read properties of my objects. It's my thought that this is compiling into something I do not expect it to but am not sure why or how I could see what the result is. Any ideas to get me going here? Is there a better more angular way to do this?

Module with directives

angular.module('myApp.APP', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/testapp', {
    templateUrl: 'javascripts/nestedExample/testHTML.html',
    controller: 'testController'
  });
}])

.controller('testController', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
  $scope.paneDirective = "<div pane> </div>";
}])

.directive('pane', function($compile) {
  return {
    scope: {},
    template: "<div data-split-pane> <div data-split-pane-component data-width='33%'><p>top</p></div><div data-split-pane-divider data-width='5px'></div> <div data-split-pane-component> <ng-transclude></ng-transclude> <p>bottom</p></div></div>",
    transclude: true,
    link: function(scope, element, attrs) {
      console.log(element.contents())
      //$compile(element.contents())(scope);
    },
  };
});

simplified html

<div ng-controller="testController">
  <div pane> {{paneDirective}}  </div>
</div>

editing in formatted html code used in template

<div data-split-pane>
   <div data-split-pane-component data-width='33%'>
      <p>top</p>
   </div>
   <div data-split-pane-divider data-width='5px'></div>
   <div data-split-pane-component>
      <ng-transclude></ng-transclude>
      <p>bottom</p>
   </div>
</div>

score 0 · Answer 1 · answered Dec 10 '16 at 04:16

0

Use Angular's ng-transclude directive in your template to specify the insertion point for the transcluded content, like so:

   template: '<div ...><div ng-transclude></div> </div>'

answered Dec 10 '16 at 04:16

Derek Williams

229
2
4

There actually is a transclude going on in the mess of the html there. Sorry it isn't more readable. The HTML gets inserted just fine.. just as a string and the errors come when i try to compile it. – massphoenix Dec 10 '16 at 05:07

score 0 · Answer 2 · answered Dec 19 '16 at 22:54

I am not sure if this will help, but one way you can approach this is to generate your html string, then just compile the whole thing out. Any other directives you include will get compiled. Check this out and see if its workable for you...

https://plnkr.co/edit/FacA3AwOqJA2QARK28c8?p=preview

angular.module('myApp', [])

.controller('testController', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
  $scope.paneDirectiveContent = `
    <div data-split-pane> 
      <div data-split-pane-component data-width='33%'>
        <p>top</p>
      </div>
      <div data-split-pane-divider data-width='5px'>
      </div> 
      <sample></sample>
      <div data-split-pane-component>  
        <p>bottom</p>
      </div>
    </div>
  `;
}])

.directive('pane', function($compile) {
  return function(scope, element, attrs) {
      element.html(scope.$eval(attrs.pane));
      $compile(element.contents())(scope);
    }
});

Acts on this Html:

<div ng-controller="testController">
   <div pane="paneDirectiveContent"></div>
</div>

And any other directives will get rendered:

.directive('sample', function($compile) {
  return {
    template: `<b>Other directives will be rendered</b>`
  }
})

How can I render compiled Transcluded HTML in Angular?

2 Answers2