大佬教程收集整理的这篇文章主要介绍了angularjs – 为什么ng-bind-html和$sanitize产生不同的结果？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
奇怪的是,当我将ng-bind-html应用于模型时,它会产生不同的结果,当我在指令中使用$sanitize或$sce时.
这是我编写的一个示例
http://plnkr.co/edit/iRvK4med8T9Xqs22BkOe?p=preview
第一个文本区域使用Ng-bind-html,第二个文本区域使用$sanitize,第三个应该是ng-bind-html指令的代码,因为我从AngularJS源代码中删除了.
&安培; QUOT;只有更正改为“当使用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',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',function($parse,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>
与我们调用$sanitize完全相同,那么真正的区别是什么？真正的区别在于文本框的innerHTML和值之间.查看此example plunker.您可以看到调用两种不同方法之间的区别,使用不同的方法来转义双引号.我没有去挖掘w3规范或浏览器代码,但我认为innerHTML赋值是在创建documentFragment,抓取它的textContent,然后将其分配给文本框的值的引擎下做额外的工作.显然,值只是抓住字符串并按原样插入.
那么你的指令有什么问题呢？我看到element.html(已处理)在评论中,但取消注释它没有影响.事实上,它确实可以工作一瞬间！使用调试器逐步调试,文本框的值已正确设置,但随后会触发$digest循环并立即更改它！事实是ngModelDirective正在阻碍,特别是它是$render function of the baseInputType.我们可以在代码中看到它正在使用element.val方法.
我们如何在指令中解决这个问题？需要ngModelController并覆盖其$render函数以改为使用element.html方法(example plunker).
// Add require to get the controller require: 'ngModel',// Controller is passed in as the 4th argument link: function(scope,attrs,ngModelCtrl) { // modify the $render function to process it as HTML ngModelCtrl.$render = function() { element.html(ngModelCtrl.$isEmpty(ngModelCtrl.$viewvalue) ? '' : ngModelCtrl.$viewvalue); };
以上是大佬教程为你收集整理的angularjs – 为什么ng-bind-html和$sanitize产生不同的结果？全部内容，希望文章能够帮你解决angularjs – 为什么ng-bind-html和$sanitize产生不同的结果？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。