角js ng顯示不起作用

Question

我正在開發一個小型Web應用程序，並且遇到了問題。

我想在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>

在我的HTML中，單擊按鈕后切換為main.showLoader = true 。

控制器功能：

$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： -

<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)>

它會按預期打開，但不會熄滅。 一些幫助 ？

Answer 1

嘗試做var self = this; 在控制器的頂部並將其更改為self.showLoader = false

在當前上下文中， this是您所使用的功能。

Answer 2

我認為這些屬性放置在不同的對象上。 啟用加載程序時 ，代碼$scope.main.showLoader設置為true 。 另一方面，超時回調將變量this.showLoader為false 。 正如@tpie已經解釋的那樣，在這種情況下， this僅引用超時回調函數本身。

您發布的HTML代碼段不完整，所以我只能猜測。 使用以下行重置showLoader可以解決此問題。

$scope.main.showLoader=false;