Почему ng-bind-html и $ sanitize дают разные результаты?
Я пытаюсь очистить содержимое некоторых текстовых областей, я не могу использоватьng-bind-html потому что это нарушает двустороннюю привязку (ng-model не работает одновременно)
Странно, когда я применяюng-bind-html для модели это дает другой результат, когда я использую$sanitize или же$sce внутри директивы.
Вот образец, который я сделал
http://plnkr.co/edit/iRvK4med8T9Xqs22BkOe?p=preview
Первое использование текстовой областиng-bind-htmlВторое использует$sanitize и третий должен быть кодом для директивы ng-bind-html, как я извлек из исходного кода AngularJS.
" только исправлено изменено на" при использовании ng-bind-html в двух других примерах он меняется на"
Как я могу повторить результатыng-bind-html в моей директиве - при сохранении двухстороннего связывания?
angular.module('sanitizeExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', '$sce',
function($scope, $sce) {
$scope.value = 'This in "quotes" for testing';
$scope.model = 'This in "quotes" for testing';
}
]).directive('sanitize', ['$sanitize', '$parse', '$sce',
function($sanitize, $parse, $sce) {
return {
restrict: 'A',
replace: true,
scope: true,
link: function(scope, element, attrs) {
var process = function(input) {
return $sanitize(input);
//return $sce.getTrustedHtml(input);
};
var processed = process(scope.model);
console.log(processed); // Output here = This in "quotes" for testing
$parse(attrs.ngModel).assign(scope, processed);
//element.html(processed);
}
};
}
])
.directive('sanitizeBindHtml', ['$parse', '$sce',
function($parse, $sce) {
return {
restrict: 'A',
replace: true,
scope: true,
link: function(scope, element, attrs) {
var parsed = $parse(attrs.ngModel);
function getStringValue() {
var value = parsed(scope);
getStringValue.$$unwatch = parsed.$$unwatch;
return (value || '').toString();
}
scope.$watch(getStringValue, function ngBindHtmlWatchAction(value) {
var processed = $sce.getTrustedHtml(parsed(scope)) || '';
$parse(attrs.ngModel).assign(scope, processed)
});
}
};
}
]);<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.js"></script>
<!doctype html>
<html lang="en">
<body ng-app="sanitizeExample">
<div ng-controller="ExampleController">
<textarea ng-bind-html="value"></textarea>
<br/>{{value}}
<br/>
<br/>
<textarea sanitize ng-model="model"></textarea>
<br/>
<br/>
<textarea sanitize-bind-html ng-model="model"></textarea>
</div>
</body>