Угловая ng-модель, показывающая экранированные элементы html во входных данных

Question

Это мой контроллер, и я добавил переменную «title» со значением «This & That».

app.controller('Controller', ['$scope', function($scope){ 

    $scope.title = "This & That"; 

}]); 

Мой ввод привязан к «заголовку», как показано ниже.

<input type="text" ng-model="title" /> 

Конечный результат показывает ниже как

«Это & что» вместо просто «Это & Это».

Однако если добавить фильтр, как этот

<input type="text" ng-model="title | htmlentities_decode" /> 

я получаю «Это & Это», но тогда я больше не может изменить входной сигнал.

Фильтр это

app.filter('htmlentities_decode', function(){ 

    return function(input){ 

     return $('<textarea />').html(input).text(); 
    }; 
}); 

Как получить «Это &, что» вместо «Это &, что» и по-прежнему иметь возможность редактировать вход. Или лучше, как я могу привязать название к ng-модели и не иметь амперсанд, закодированный до & без фильтра?

Заранее спасибо.

Answer 1

Вы должны использовать $sce. Ваш код будет таким, как:

app.filter('htmlentities_decode', function($sce){ 

    return function(input){ 
     if(input) 
      return $sce.trustAsHtml(input) 
    }; 
}); 

Answer 2

Попробуйте ng-bind-html вместо ng-model.