Render angular code within a ng-bind-html

Question

I'm trying to render github readme's using remarkable and angular. Everything related to parsing the markdown is working properly but unfortunately the product owner has some more wishes for the application.

He wants to be able to put youtube video's and html forms in the readme. I'm currently using the Youtube-embed directive made by Brandly but unfortunately it does not render in our page.

I am using a script which uses ng-bind-html in combination with $sce.trustAsHtml in order to parse html in the page. Normal HTML is picked up just fine (form tags and other stuff) but angular stuff (youtube directive as example) aren't.

I also noticed that angular directives such as ng-click, ng-submit etc aren't working. Does anyone know how to make angular work in html which is bieing parsed within the angular application using ng-bind-html?

Here is a code example on how the html is bieing parsed to the template:

JS:

case 'markdown': $scope.fileContent = $sce.trustAsHtml(remarkable.render(content)); break;

HTML:

<pre class="fileContent"><code ng-bind-html="fileContent"></code></pre>

i've added a Plunker example with the problem I am having, as you can see it never executes the ng-submit that I added in the form.

~ Archcry

Did you try to compile the html? see docs.angularjs.org/api/ng/service/$compile — oliholz
– oliholz, Commented Dec 12, 2014 at 9:57
I tried $compile yesterday but it seems like it only works in directives or something, I can't really find a good example on the internet with $compile. — Sander Koenders
– Sander Koenders, Commented Dec 12, 2014 at 10:01
possible duplicate of ng-click not working in manually loaded HTML — hon2a
– hon2a, Commented Dec 12, 2014 at 10:15
Might be a duplicate for I don't quite understand how to make a directive take care of this. Isn't it possible without using a directive? — Sander Koenders
– Sander Koenders, Commented Dec 12, 2014 at 10:20

Gerdinand · Accepted Answer · 2014-12-15 09:26:41Z

Use the example directive from the angular site: https://docs.angularjs.org/api/ng/service/$compile

angular.module('compileExample', [], function($compileProvider) { // configure new 'compile' directive by passing a directive // factory function. The factory function injects the '$compile' $compileProvider.directive('compile', function($compile) { // directive factory creates a link function return function(scope, element, attrs) { scope.$watch( function(scope) { // watch the 'compile' expression for changes return scope.$eval(attrs.compile); }, function(value) { // when the 'compile' expression changes // assign it into the current DOM element.html(value); // compile the new DOM and link it to the current // scope. // NOTE: we only compile .childNodes so that // we don't get into infinite loop compiling ourselves $compile(element.contents())(scope); } ); }; }); }) .controller('GreeterController', ['$scope', function($scope) { $scope.name = 'Angular'; $scope.html = 'Hello {{name}}'; }]);

Then you can use it as in

<p compile="fileContent"></p>

Thank you, this solved the problem, I did not expect it to be this simple. :D

Collectives™ on Stack Overflow

Render angular code within a ng-bind-html

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related