angualrjs动态添加类名 动态改变css

实现目标：

 1.点击收藏商品，先判断是否登录，没有登录跳转到登录页面

 2.登录的话，把a跳转隐藏，切换背景图片 实现收藏

 路由：

.when("/my_center", { //我的个人中心
controller: personalCenterCtrl,
templateUrl: "views/center/personalcenter.html",
auth: true,
navUnderline: 10,
}).

启动：

.run(["$rootScope", "$location", "$anchorScroll", function($rootScope, $location, $anchorScroll) {
orderRegex($rootScope);
$rootScope.isLogin = Cookie.get("uid") != undefined; // 全局变量, 是否已登录
$rootScope.title = "";


$rootScope.$on("$routeChangeStart", function(event, next, current) { //监控路由, 路由更改前触发
$rootScope.isLogin = Cookie.get("uid") != undefined; // 全局变量, 是否已登录, 路由跳转前再次检测
if (next.auth == true && !$rootScope.isLogin) {
var nowPath = $location.path();
$rootScope.loginBackPath = nowPath; // 备份当前路径, 方便登录后跳回该地址
$location.path("/login");
} else if (next.navUnderline) {
$rootScope.navUnderline = next.navUnderline;
}
});
}]);

css

.pro-collect {
width: 30px;
height: 23px;
position: absolute;
top: 69px;
left: 1117px;
z-index: 12;
cursor: pointer;
cursor: -ms-pointer;
}
.pro-collect-true{
background: url("../../img/productdetail/ic_03.png") no-repeat;
background-size: 100% 100%;
}
.pro-collect-false{
background: url("../../img/productdetail/ic_033.png") no-repeat;
background-size: 100% 100%;
}

html

<!--收藏-->

<div class="pro-collect pro-collect-{{isShow}}" ng-click="change_pic()">
<a href="/login" ng-if="!islogin" ng-style="noshow"><img src="../../img/productdetail/ic_03.png"/></a>

</div>

js

//2.收藏商品

if($rootScope.isLogin){
$scope.isShow = true;
$scope.noshow = {
"display":'none',
}
$scope.change_pic = function() {
$scope.isShow = !$scope.isShow;
}

}