ng-include가 완전히로드되기 전에 Spinner-Gif를 추가하는 방법

Question

동적으로 서버에서 html-partials를로드하는 div-layer가 있습니다. 템플릿 변수는 탐색의 링크를 클릭하면 변경됩니다.

<div id="ajaxwrapper" ng-include="template"> 
</div> 

이 작동합니다. 그러나 템플릿을로드하는 데는 짧은 시간이 필요하며 그 시간 동안 사용자는 어떤 종류의 응답도받지 못합니다. 왜 내가 템플릿이로드 될 때까지 스피너를 표시하려고하는지. 슬프게도 나는 어떻게해야할지 모른다.

내 링크는 다음과 같이 보일 :

<a ng-click="navi($event)" href="www.someurl.de">Text</a> 

NAVI 기능은 다음과 같습니다 :

$scope.navi = function (elem) { 
    elem.preventDefault(); 
    var urlstring = ""; 
    if (typeof elem.target.href !== 'undefined') { 
     urlstring = elem.target.href; 
     $location.path(elem.target.pathname).search({ knt: $scope.aktuellesVertragskonto.nr });; 
    } else { 
     urlstring = elem.target.baseURI 
     $location.path("/"); 
    } 
    $scope.template = $location.absUrl(); 
}; 

내가 스피너를 구현하는 방법에 대한 몇 가지 포인터가 필요합니다.

<script type="text/ng-template" id="loader"> 
<div class="text-center"> 
    <img src="~/images/spinner/ajax-loader.gif" /><br /> 
    Loading 
</div> 

이

Answer 1

ng-include 지시어는 onload 식 (reference)을 포함,이 같은 것을 할 수 있습니다 :

을 당신은 회 전자 템플릿은 다음과 같이 보일 것이다

:) 감사

<div id="ajaxwrapper" 
    ng-show="loaded" 
    ng-include="template" onload="loaded = true"> 
</div> 

<div class="text-center" 
    ng-hide="loaded"> 
    <img src="~/images/spinner/ajax-loader.gif" /><br /> 
    Loading 
</div>