Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular处理Html转义问题 #5

Closed
Wscats opened this issue Apr 25, 2016 · 0 comments
Closed

Angular处理Html转义问题 #5

Wscats opened this issue Apr 25, 2016 · 0 comments
Labels

Comments

@Wscats
Copy link
Owner

Wscats commented Apr 25, 2016

angular用$sce服务来过滤HTML标签
先看这个教程,再往下看~
http://www.w3cscript.com/Angular/2014-11-26/1.html

$scope.shareTips = data.data;//后台返回的数据赋个值吧
$scope.shareTipss = '1、Eno Yao;<br/>2、WsCats';
$scope.shareTips.rule_content = $sce.trustAsHtml($scope.shareTips.rule_content);//这里发现还是不行,难道姿势不对吗,纠结中~
console.log($scope.shareTips.rule_content);//测试返回的是空对象
$scope.shareTips.rule_content = $scope.shareTips.rule_content.replace(/\r?\n/g, "<br />");//换用正则解决,把所有\n换成<br />,是可以的
console.log($scope.shareTips.rule_content);//这里返回的字符串已经把\n换成<br />的

这里有两点细节很重要:
首先记得用$sce.trustAsHtml要先注入

angular.module('App').controller('ShareTipsCtrl', ['$rootScope', '$scope', 'Request', '$cookies', '$window', '$routeParams', '$location', '$sce',
    function($rootScope, $scope, request, $cookies, $window, $routeParams, $location, $sce) { //测试$sce
}]);

其次就是View渲染的时候
不要用
<p>{{$scope.shareTips.rule_content}}</p>
这里返回
会被ng安全处理的
用这个吧
<p ng-bind-html="shareTips.rule_content"></p>
后面我有时间会补充中...

20160426更新
最近调试了支付宝的网页支付的时候终于把这个问题解决了
由于支付宝的demo是后台生成一个DOM来返回的,所以在ng中我直接拿这部分数据渲染到浏览器上就可以了

angular.module('AswsTest').controller('OrderAliPayCtrl', ['$rootScope', '$scope', 'Request', '$cookies', '$window', '$routeParams', '$location', 'Tool', '$sce',
    function($rootScope, $scope, request, $cookies, $window, $routeParams, $location, tool , $sce) { 
        console.log($rootScope.alipayDom.order_string);
        $scope.dom = $sce.trustAsHtml($rootScope.alipayDom.order_string);
    }
])
<div ng-bind-html="dom">
</div>

这里ng-bind-html$sce是配合使用的,实践中缺一不可记得噢
image
然后成功渲染出这个页面

@Wscats Wscats changed the title Angular处理Html转移问题 Angular处理Html转义问题 Jun 4, 2016
@Wscats Wscats closed this as completed Aug 22, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant