how to strip placeholder img in textAngular editor in scope var?

Question

I'm using TextAngular directive in an app with Angular. When I insert a youTube link (through the toolbar button) it shows a placeholder image in the editor. I wish to save all the html in a $scope var but without the placeholder html. Currently I get something like this if I output the $scope var which is bound to the editor (ng-model):

"<p><img class="ta-insert-video" ta-insert-video="http://www.youtube.com/embed/cUeMF18zA4Y" src="" allowfullscreen="true" width="300" frameborder="0" height="250"/></p>"

What I really want is this:

"<p><iframe src="http://www.youtube.com/embed/cUeMF18zA4Y" allowfullscreen="true" width="300" frameborder="0" height="250"></iframe></p>"

Answer 1

Two solutions.

1. If you're just outputting it on the screen, use ta-bind ng-model="html" instead of ng-bind-html="html". That calls the custom renderers that convert it to the iframe syntax.

2. If you're sending it back to the server and don't want it stored as the placeholder Inject 'taApplyCustomRenderers' into your controller and use it as such: htmlToServer = taApplyCustomRenderers($scope.htmlValue);.