2016-02-08 2 views
0

Привет, я хотел реализовать загрузчик, который, когда пользователь нажимает на профиль, должен скрываться после определенного времени. Я действительно реализовал функцию тайм-аута, которая, как только пользователь нажимает на кнопке div скрывается после определенного времени.angularjs: -Полезный загрузчик, приходящий на первый div

Погрузчик идет слева, а не на соответствующем DIV, который вызывает проблемы в UI

Внизу мой фрагмент кода: -

$scope.totalNumberOfProfile = totalNumberOfProfile; 
     $scope.categoryOfProfile = "Member Who Shortlisted You"; 

     $scope.custom = true; 
     $scope.alertDisplayed = false; 
     $scope.connect = function(profile) { 

      $timeout(function() { 
       $scope.totalNumberOfProfile--; 
       profile.show = false; 
       profile.status = "connect"; 
       document.getElementById("myDiv").style.display="block"; 
       //console.log($scope.totalNumberOfProfile); 
       if ($scope.totalNumberOfProfile == 0) { 
        $scope.custom = false; 
        $scope.alertDisplayed = true; 
        $timeout(function() { 
         $scope.alertDisplayed = false; 
        }, 2000) 
       }; 
      }, 600) 



     }; 

HTML-кода является: -

<div owl-carousel-item="" ng-repeat="profile in updatedProfile | filter:isoffice" ng-if="profile.show"> 

        <!-- Panel in owl carousel --> 
        <div id="discover " ng-class="discover_image" ng-switch on="profile.member"> 

         <li style="margin-left:0px; margin-right:0px"> 
          <div class="thumbnail_photo"> 
           <button class="close" ng-click="remove(profile)"><span class="glyphicon glyphicon-remove"></span></button> 
           <a href="#/discover/{{profile.basic.username}} " target="_blank"><span class="discover_pic_container" style="background:url({{profile.photo_details.photos[0].domain_name+profile.photo_details.photos[0].medium}}) no-repeat center top"></span></a> 
           <div class="discover_transparent"> 
            <div class="discover_name">{{profile.basic.display_name }}</div> 
           </div> 

          </div> 
          <div class="recent_join_user_info">23 yrs, 5'4", Gujarati, Hindu Mumbai, India</div> 
          <!--       <button class="discover_connect_btn btn btn-lg " ng-click="connect(profile)" ng-if="profile.member">Connect</button>--> 

          <button ng-class="{'discover_premium btn btn-lg': userLogin == 2, 'discover_connect_btn btn btn-lg': userLogin == 3}" ng-click="connect(profile)" >{{userinfor}}</button> 
<div id = "myDiv" style="display:none"><img id = "myImage" src = "images/725.gif"></div> 

         </li> 
        </div> 

       </div> 

файл GIF это я пытаюсь реализовать называется 725.gif..Please помочь мне out..Thanks

ответ

0

Вы должны добавить эти свойства CSS с вашим div-загрузчиком.

#myDiv { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 10; 
} 
Смежные вопросы