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

ゝ一世哀愁。 2022-06-04 06:16 220阅读 0赞

实现目标：

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>

//2.收藏商品  
  
if($rootScope.isLogin)\{  
$scope.isShow = true;  
$scope.noshow = \{  
"display":'none',  
\}  
$scope.change\_pic = function() \{  
$scope.isShow = !$scope.isShow;  
\}  
  
\}