0

So I have a website set up and I wish to dynamically load other .html files into a div. Each .html file contains some content but 1 .html file contains its own angularjs directives.

I was using ng-bind-html along with $scope.content = $sce.trustAsHtml(data); but I have discovered that this prints out the html raw (does not process any angular directives).

I've tried to use the various solutions on stack overflow but none have worked for me.

Website: http://algorithmictrading.azurewebsites.net/

App.js: http://algorithmictrading.azurewebsites.net/js/app.js

Example of .html pages being loaded: http://algorithmictrading.azurewebsites.net/includes/home.html http://algorithmictrading.azurewebsites.net/includes/about_us.html

.html page that contains angular directives: http://algorithmictrading.azurewebsites.net/includes/download.html

As you can see, if you navigate to the website and click on the 'download' tab, the content is loaded but the angular in the drop down menu is not handled. The test button I added should also produce an alert box.

Right now, the code is based off this thread: call function inside $sce.trustAsHtml() string in Angular js

Thanks!

Community
  • 1
  • 1
Mo Beigi
  • 1,614
  • 4
  • 29
  • 50

2 Answers2

2

I found that angular was stripping out the directives from html strings if I didn't pass them through the $sce.trustAsHtml method before passing them into the template:

$sce.trustAsHtml('<a href="/some-link" directive-example>link to add</a>');

This combined with a watch/compile on the element's content you're inserting html into seems to do the trick: 

scope.$watch(getStringValue, function() {
    $compile(element, null, -9999)(scope);    
});

Take a look at this example: http://plnkr.co/edit/VyZmQVnRqfIkdrYgBA1R?p=preview.

paul
  • 36
  • 1
0

Had the same problem this week and the best way I found to make it works was creating a custom directive called "BindComponent". Change the ng-bind-html directive to a custom directive, and inside the link method you put this:

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

The markupModel can be a string with html code or you can use $templateCache($templateCache docs) to get the code from a .html file.

Rodrigo Marchena Meira
  • 1
  • 1
  • I see what templateCache does so I could use it to store my html but I don't understand what you mean by the custom directive. Do you have documentation or any example code? – Mo Beigi Mar 04 '15 at 15:04
  • Custom directive = Any directive you create, not the angular ones(ng-bind-html, ng-click, ng-src, ng-.... everything is a directive). Just create a angular.module('app', []).directive('bindComponent', function(){}) for example and tweak the ng-bind-html for bind-component in the html element. It's almost jQuery-way, but using $compile to make the magic. http://jsfiddle.net/q13xo73h/ the slice of my code :) Some docs: https://docs.angularjs.org/guide/directive – Rodrigo Marchena Meira Mar 04 '15 at 15:12
  • The component_element value is some random html("
    "), but it could be something like: component_element = $templateCache('template.html')     – Rodrigo Marchena Meira Mar 04 '15 at 15:18
  • I tried this with no luck unfortunately. Had
    in index.html and this was app.js : http://pastebin.com/raw.php?i=n1awxbZS Am I using the directive incorrectly? I also tried adding it to the controller.     – Mo Beigi Mar 04 '15 at 15:23
  • So I had a typo with the directive name. After fixing that up I can get html to show if I initially store it on page load but how do I get the directive to get called when I click a tab on my nav bar? – Mo Beigi Mar 04 '15 at 15:35
  • if you're trying to render a directive, like , the code to be injected in the element(the "markupModel") should be "", so you will render the directive. But obviously that new directive need to have some template to render something and not an empty element. If you want to bind the content with a click and not automatically, you can put the code I gave you inside a function that will be called in the click, something like `$scope.bindElement = function() { element.html(markupModel); $compile(element.contents())(scope); }` – Rodrigo Marchena Meira Mar 04 '15 at 17:44