Render angular code inside ng-bind-html
I am trying to follow the github readme with wonderful and angular. Everything related to markup analysis works correctly, but unfortunately the product owner has a few more wishes for the app.
He wants to be able to embed youtube video and html forms in the readme. I am currently using the Youtube-embed directive made by Brandly , but unfortunately it does not appear on our page.
I am using a script that I use ng-bind-html
in conjunction with $sce.trustAsHtml
to parse the html on the page. Plain HTML picks up just fine (form tags and other stuff), but angular stuff (youtube directive as an example) isn't.
I also noticed that angular directives like ng-click
, ng-submit
etc do not work. Does anyone know how to make angular work in html that is parsed in an angular app using ng-bind-html
?
Here is some sample code on how html is parsed using a template:
JS:
case 'markdown':
$scope.fileContent = $sce.trustAsHtml(remarkable.render(content));
break;
HTML:
<pre class="fileContent"><code ng-bind-html="fileContent"></code></pre>
I added a Plunker example with the problem I was facing as you can see that it never executes ng-submit
which I added in the form.
~ Archcry
source to share
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 like in
<p compile="fileContent"></p>
source to share