[英]Angular js ng show not working
I am working on a small web app and facing an issue. 我正在开发一个小型Web应用程序,并且遇到了问题。
I want to show a preloader svg inside a div as below :- 我想在div中显示一个预加载器svg,如下所示:-
<div class="loader" ng-show="main.showLoader">
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
In my HTML I switched main.showLoader = true on click of a button. 在我的HTML中,单击按钮后切换为main.showLoader = true 。
Controller Function :- 控制器功能:
$scope.setCA=function(cont,click){
if($scope.aC!=null){
$scope.aC={};
}
if($scope.c[c.p]==null){
$scope.mC='';
.....Server interactions here
var chat={
'name':cont.name,
'phone':cont.phone,
'msgs':msgs,
'unreadMsgs':unreads,
};
$scope.chats[cont.phone]=chat; //Assign the messages from repective users in the chats array to the respective contact phone number as here
$scope.$apply(function(){
$scope.activeChats[cont.phone]=chat;
if(click)
$scope.setChatInFocus($scope.chats[cont.phone]); //Send chats to setChatinFocus
});
});
}
else{
$scope.showFirstTime = false;
if($scope.activeChats[cont.phone]==null){
$scope.activeChats[cont.phone]=$scope.chats[cont.phone];
}
if(click)
$scope.setChatInFocus($scope.chats[cont.phone]);
}
setTimeout(function(){scrollToBottom()},10);
this.showLoader=false;
};
HTML:- HTML: -
<div class="singleContact person" ng-cloak ng-class="{active: contactName === contact.name}"
ng-repeat="contact in contacts"
ng-click='main.showLoader=true;setChatActive({ "name": contact.name, "phone": contact.phone },true)>
It switches on as intended but does not go off. 它会按预期打开,但不会熄灭。 Some help ?
一些帮助 ?
Try doing var self = this;
尝试做
var self = this;
at the top of your controller and change it to self.showLoader = false
在控制器的顶部并将其更改为
self.showLoader = false
In the current context, this
is the function you are in. 在当前上下文中,
this
是您所使用的功能。
I think the properties are placed on different objects. 我认为这些属性放置在不同的对象上。 When you enable the loader , the code sets
$scope.main.showLoader
to true
. 启用加载程序时 ,代码
$scope.main.showLoader
设置为true
。 The timeout callback on the other hand sets a variable this.showLoader
to false
. 另一方面,超时回调将变量
this.showLoader
为false
。 As @tpie already explained, this
in this case only references to the timeout callback function itself. 正如@tpie已经解释的那样,在这种情况下,
this
仅引用超时回调函数本身。
The HTML snippet you posted is not complete, so I can only guess. 您发布的HTML代码段不完整,所以我只能猜测。 Using the following line to reset
showLoader
can solve the problem. 使用以下行重置
showLoader
可以解决此问题。
$scope.main.showLoader=false;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.