Insert HTML (user-defined directives) into view - AngularJS

Question

This is my first question on Stackoverflow so please excuse any mistakes I make. I'm trying to display in the view, some HTML from a template, which I use in the following directive:

app.directive('picturegallery', function () {
return {
    scope: true,
    restrict: "E",
    templateUrl: '../../Controllers/pictureGallery.html'
}

});

I do this on click by applying .push, so <picturegallery></picturegallery> gets added to the $scope.sections:

app.directive("picgallery", function ($compile) {
return function (scope, element, attrs) {
    element.bind("click", function () {
        scope.count++;
        scope.sections.push({ desc: "<picturegallery></picturegallery>" });
        angular.element(document.getElementById('template-id')).append($compile("<picturegallery></picturegallery>")(scope));

    });
};

});

I use $sce.parseAsHtml as shown below and it works, but the HTML still doesn't get translated to the actual HTML pointed by the template, and simply shows up as <picturegallery></picturegallery>. I would like the actual template pointed to by pictureGallery.html to show up.

$scope.sections = [
        { desc: '<div>hello</div>' },
        { desc: '$sce.parseAsHtml("<picturegallery></picturegallery>")' }

    ];

Is there any way I could show up the actual content from the template? I've already been through a couple of solutions like Angularjs: preview sanitized html on Stackoverflow which suggested the use of $sce.parseAsHtml and $sce.trustAsHtml but they don't work for my code.

Answer 1

The best solution for me with a similar problem was to create a custom filter which allows me to render imported HTML.

app.filter('unsafe', ['$sce', function($sce) { return $sce.trustAsHtml; }])

In my views I can then display the HTML with the filter:

<div>{{myCtrl.someHTML | unsafe}}</div>

If this doesn't work out of the box, you'll also need to set a resource white list in your angular config like this:

$sceDelegateProvider.resourceUrlWhitelist(['self', 'https://www.google.com/maps/embed/v1/**']);

(The google link is only to demonstrate that you can import external HTML from another website/service and render it as a trusted source)

Answer 2

If you want to render the HTML from the template just call the directive in the HTML:

<picturegallery></picturegallery>

This will load the directive which will in turn load the template.