I am facing a challenge in trying to display customized HTML content using Angular directives for nesting divs multiple times. When I execute the code below, the transcluded tag is displayed correctly but the browser output shows the string text " ". I attempted to compile this into HTML and render it by using the following:
$compile(element.contents())(scope);
However, this approach resulted in console errors related to orphaned transclusion as well as errors indicating that properties of my objects cannot be read. It seems like the compilation is yielding unexpected results, but I'm unsure why or how I can view the outcome. Any suggestions on how to proceed? Is there a more efficient Angular method for achieving 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 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>