AngularJS глотания HTML-теги в текстовое поле

Question

<textarea id="Synopsis_Description" rows="9" class="form-control" ng-model="movie.summary" placeholder="Summary" ng-show="editMode"></textarea> 

Я ввожу следующие данные

I <u>am</u> in <strong>New York</strong> 

Но контроллер получает единственное слово

I am in New York 

Любая идея, почему это происходит

JSFIDDLE

Answer 1

это plunkr http://plnkr.co/edit/G9riRUm8HHmWccBO8K8a?p=preview

контроллер:

function Ctrl($scope) { 
     $scope.summary = null ; 
     $scope.output = null ; 
     $scope.updateMovie = function() { 
     console.log($scope.summary); 
     $scope.output = $scope.summary ; 
     } 
} 

HTML

<div ng-controller="Ctrl"> 
    <button ng-click="updateMovie()">Update</button><br> 
    <textarea rows="9" class="form-control" ng-model="summary" placeholder="Summary" ></textarea> 
    <br/> 
    <button class="btn btn-success btn-center" ng-show="editMode" ng-click="updateMovie()">Update</button> 

    <span>{{output}}</span> 

</div> 

---

по умолчанию углового не отображать HTML тегов в целях предотвращения инъекции коды. Вы должны заставить его:

создать фильтр:

angular.module('filters', []).filter('unsafe', function ($sce) { 
    return function (val) { 
     return $sce.trustAsHtml(val); 
    }; 
}); 

и использовать это в целях

<span ng-bind-html="varWithHtml | unsafe"></span> 

Answer 2

Спасибо за помощь вопрос был относительно использования локальных переменных в контроллере вместо использования $ scope.movie.summary. Это сработало для меня.

Я использовал следующий код, чтобы разрешить его

HTML Сторона:

<div class="genre-list"> 
    <div ng-hide="editMode">{{movie.summary}}</div> 
    <textarea id="Synopsis_Description" ng-model="movie.summary" name="val_synopsis" placeholder="Summary" ng-show="editMode"></textarea> 
    <button type="button" id="bold" ng-click="formatText('Synopsis_Description','strong')">Bold</button> 
    <button type="button" id="italic"ng-click="formatText('Synopsis_Description','i')">Italic</button> 
    <button type="button" id="underline" ng-click="formatText('Synopsis_Description','u')">Underline</button> 
    <button type="button" id="linebreak" ng-click="formatText('Synopsis_Description','br')">Line-Break</button> 
    <button type="button" id="hyperlink" ng-click="formatUrl('Synopsis_Description');">Hyperlink</button> 
</div> 

AngularJS:

/*Function for Editor*/ 
    $scope.formatText = function(text, tag) { 
     var reg = new RegExp('<' + tag + '>'); 
     var newText; 
     var obj = document.getElementById(text); 
     var selectedText = document.selection ? document.selection.createRange().text : obj.value.substring(obj.selectionStart, obj.selectionEnd); 
     if (selectedText !== '') { 
      if (reg.test(selectedText.replace(/<tag><\/tag>/g, ''))) { 

       var re = new RegExp('<' + tag + '[><]*>|</' + tag + '[><]*>', 'g') 
       newText = selectedText.replace(re, ''); 
       $scope.movie.summary = obj.value.replace(selectedText, newText); 
       selectedText = ''; 
      } else { 
       newText = $scope.movie.summary.substring(0, obj.selectionStart) + '<' + tag + '>' + $scope.movie.summary.substring(obj.selectionStart, obj.selectionEnd) + '</' + tag + '>' + $scope.movie.summary.substring(obj.selectionEnd); 
       $scope.movie.summary = newText; 
      } 
     } else { 
      alertify.error('Highlight the text to add required styles !!!'); 
      return false; 
     } 
     selectedText = ''; 
     obj.selectionStart = 0; 
     obj.selectionEnd = 0; 

    }; 


    /*Function for Additing Hyperlinks*/ 
    $scope.formatUrl = function(text) { 
     var obj = document.getElementById(text); 
     var urlname = ''; 
     var newText; 
     var reg = new RegExp('a>'); 


     var selectedText = document.selection ? document.selection.createRange().text : obj.value.substring(obj.selectionStart, obj.selectionEnd); 

     if (selectedText !== '') { 

      if (reg.test(obj.value.replace(/<[\/]{0}(a)[^><]*>/g, ''))) { 
       var re = new RegExp('<a[^><]*>|<.a[^><]*>', 'g') 
       newText = obj.value.replace(re, ''); 
       $scope.movie.summary = newText; 
       selectedText = ''; 
      } else { 
       urlname = prompt('Enter URL'); 
       newText = $scope.movie.summary.substring(0, obj.selectionStart) + '<a href="' + urlname + '" target="_blank">' + $scope.movie.summary.substring(obj.selectionStart, obj.selectionEnd) + '</a>' + $scope.movie.summary.substring(obj.selectionEnd); 
       $scope.movie.summary = newText; 
      } 

     } else { 
      alertify.error('Highlight the text to add required styles !!!'); 
      return false; 
     } 
     selectedText = ''; 
     obj.selectionStart = 0; 
     obj.selectionEnd = 0; 

    };