AngularJS How to display html in a text box using ng-model?

Question

How to display html in a text box using ng-model? Or how can I disable or cancel sanitized functionality for my model?

I can correctly display data using ng-bind-html-unsafe, as in the following example, but the more I can not access input using $ scope.formData [data.name].

<textarea ng-bind-html-unsafe="formData[data.name]"></textarea> 

When I try to do this, it only displays the sanitized code, and I can access the input using $ scope.formData [data.name]:

 <textarea ng-model="formData[data.name]"></textarea> 

The input is encoded and looks like this:

 Funktionalität "isHybrid", Übersicht "Kategorien anzeigen" / "Ki 

Is there any filter / from the angular -way window or do I need to create a directive to solve this problem?

UPDATE: I skipped this problem by disabling php encoding, but maybe there is still a good solution for manually decoding data using angularjs using an html tag or filter?

Answer 1

I don’t know if you have already fixed your code (I think by the time this question was written), but I ran into the same problem and did it this way with the help of a helper directive that retrieves data from ngModel and also updates it :

 yourApp.controller('HtmlCtrl', function(){ $scope.items = [{htmlField:'<p>stuff</p>'},{htmlField:'<p>more stuff</p>'}]; }); yourApp.directive('htmlText', function(){ return { 'restrict': 'A', 'require': 'ngModel', 'link': function(scope,element,attrs,model) { model.$formatters.push(function(val){ return val.htmlField; }); model.$parsers.push(function(val){ model.$modelValue.htmlField = val; }); } }; }); 

And the HTML looks like

 <tr ng-repeat="item in items"> <td><textarea ng-model="item" html-text></textarea></td> </tr>