在等待iframe加載時根據點擊鏈接顯示加載器，並在iframe加載後使用AngularJS隱藏加載器

我試圖顯示加載器，同時等待iframe加載根據鏈接點擊。我使用Semantic UI的加載器。到目前爲止，一旦鏈接被點擊，它可以做的是顯示加載器。但是，即使在加載iframe文檔之後，加載器也不會消失。在等待iframe加載時根據點擊鏈接顯示加載器，並在iframe加載後使用AngularJS隱藏加載器

下面是HTML代碼：

<div class="drive-link"> 
    <div ng-if = "!READY.value"> <!-- to check if the link has been clicked --> 
     <div class="ui active centered inline loader"></div> 
    </div>  
    <iframe name="embedded-iframe" allowfullscreen="" frameborder="0" iframe-onload></iframe> 
</div> 

<div class="active content"> 
    <a target="embedded-iframe" href="{{file.link}}" ng-click="show_file_name(file)"> {{file.name}} </a> 
    <div ng-repeat="next_file in files | limitTo:files.length:$parent.$index"> 
    <a target="embedded-iframe" ng-if="$index > 0 && next_file.category_id == file.category_id" href="{{next_file.link}}" ng-click="show_file_name(next_file)">{{next_file.name}}</a> 
    </div>    
</div>

AngularJS代碼：

app.controller('mainController', function($scope) { 
    $scope.READY = {value:true}; 

    $scope.show_file_name = function(file){ 
     $scope.fileName = file.name; 
     $scope.fileDesc=file.description; 
     $scope.READY = {value:false}; 
    } 
}); 

app.directive("iframeOnload", function() { 
    return function(scope) { 
     scope.READY.value = true; 
     console.log(scope.READY.value) 
    }; 
});

我有一個指令IFRAME，所謂的iframe的onload。我在想，如果點擊了錨點標記，它會以某種方式連接到iframe（因爲單擊錨點標記將顯示嵌入的文檔），並且會觸發iframe-onload，這會改變READY的值。但是，情況並非如此，並且iframe-onload只會在加載HTML頁面時觸發一次。

注：我試圖從超時敬而遠之，因爲我不認爲硬編碼裝載機多久顯示是最好的一段路要走。

任何幫助將非常感激。謝謝！

來源

2017-08-21 limciana

使用簡單的方法，這是使用ng顯示您的加載程序代碼。例如，如果你有這樣的

<a href="link" ng-click="activateLoader()">Link To be click</a> 
<img src="loader.gif" ng-show="loader"/>

在GIF圖像加載器，然後在控制器，你可以像這樣

$scope.loader=false; 
$scope.activateLoader=function(){ 
    $scope.loader=true; 
}

來源

2017-08-21 16:04:27

裝載機將如何消失？在你的例子中，我希望加載器在圖像加載後也消失。 @Fahad Subzwari – limciana

@limciana使加載圖片的功能，然後標記$ scope.loader =假像這樣 $ scope.getPicture = getProfilePicture（）成功（函數（RES）{$ = scope.loader假。 }） .error（function（err）{scope = 0; console.log（err） }） –

這也適用於iframe？ – limciana

這是HTML表，其中我的數據負載。

<tr ng-if="!isDataLoading" ng-repeat="x in companies"> 
            <td>{{x.Id}}</td> 
            <td>{{x.CompanyName}}</td> 
            <td>{{x.ContactPerson}}</td> 
            <td>{{x.TotalRerrals}}</td> 
            <td>{{TotalRegistered}}</td> 
            <td>{{x.TotalConverted}}</td> 
            <td>{{x.TotalSalesAgents}}</td> 
            <td class="text-green"><i class="fa fa-circle"></i> {{x.AccountStatus}}</td> 
           </tr> 
<div ng-if="isDataLoading" style="width: 100px; margin: auto;"> 
       <img src="assets/loader.gif" style="width: 100px; height: 100px;"> 
     </div>

，這裏是我的控制器代碼

User.getCompanies().success(function(res) { 

       console.log('All companies', res); 
       if (res != null || res != "") { 
        $scope.customers = res; 
        $scope.companies = []; 
        for (var i = 0; i < res.length; i++) { 
         $scope.companies.push({ 
          Id: res[i].Id, 
          AccountStatus: res[i].AccountStatus, 
          CompanyName: res[i].CompanyName, 
          ContactPerson: res[i].ContactPerson, 
          TotalConverted: res[i].TotalConverted, 
          TotalRegistered: res[i].TotalRegistered, 
          TotalRerrals: res[i].TotalRerrals, 
          TotalSalesAgents: res[i].TotalSalesAgents, 
         }) 
        } 
       } 
       $scope.isDataLoading = false; 
      }) 
      .error(function(err) { 
       console.log('error', err); 
       $scope.isDataLoading = false; 
      })

你可以把這個作爲一個例子。並根據您的需要更改此代碼。

來源

2017-08-23 11:54:45

在等待iframe加載時根據點擊鏈接顯示加載器，並在iframe加載後使用AngularJS隱藏加載器

回答

相關問題