AngularJS 中a标签unsafe导致的一系列问题。

一个很小很小的bug,明知道很小,但是就是小到找了两个小时,一点都不夸张,此处记录下。

AngularJS为了安全检查功能给a标签的href默认成unsafe(很变态有木有)

案例

使用directive定义的公用头部组件:

<body ng-controller="mainController">
	<otham-head></otham-head>
</body>

在atdetail.html中调用
组建中有包含退出登录的a标签(如果不用a标签,倒是不会出现这个问题,算是自己踩得坑,但迟早要踩)
退出登录的操作
a标签

.
.
<li>
	<a href="javascript:;" ng-click="quit()">退出</a>
</li>
.
.

然后退出操作在组件中

.
.
$scope.quit = ()=>{
	handleLocalStorage('remove','GothamUser');
	$window.location.reload()
}
.
.

坑点:点击了a标签 本地localstorage清除成功,页面伪刷新了一次,但是页面内容没变,写的逻辑是退出登录后显示【登录/注册】按钮,最终控制台中发现每次点击退出都会提示如下图:
a标签unsafe
解决方法:
在声明angular应用是,使用$compileProvider服务进行配置

var app = angular.module('Gotham',[])
	app.config(['$compileProvider',function ($compileProvider) {
		$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|sms|javascript):/);
	}]);

结尾:AngularJS中a标签的unsafe行为虽然早就知道,但是依然会对开发中一些其他的操作产生影响。

发布了23 篇原创文章 · 获赞 10 · 访问量 401

猜你喜欢

转载自blog.csdn.net/qq_35593965/article/details/103619879