加載ng-view之前的空白預加載器

我知道這方面有很多問題，但其中很多都是舊的（有些不再適用於新的Angular版本），而其他的則與什麼不相關我正在努力實現。加載ng-view之前的空白預加載器

基本上我有一個NG-視圖：

<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 bg-body"> 
    <div ng-view></div>      
</main>

在我顯示與路由和諧音做了一個http.get後的數據。正如標題中所寫，我希望在加載數據時在中心顯示一個空白（ng-view）（頁面中有一個微調器（<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>））頁面。

我tryed一個指令，但似乎不工作：

AngularJS：

var app = angular.module('app', ['plangular','ngRoute', 'ngSanitize', 'slick']); 

app.directive('loading', function() { 
     return { 
     restrict: 'E', 
     replace:true, 
     template: '<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>', 
     link: function (scope, element, attr) { 
       scope.$watch('loading', function (val) { 
        if (val) 
         $(element).show(); 
        else 
         $(element).hide(); 
       }); 
     } 
     } 
});

HTML：

<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 bg-body">   
    <loading></loading> 
    <div ng-view></div>       
</main>

什麼可能是最好的方法？

來源

2017-05-29 GoingSolo

哪裏出問題了？究竟發生了什麼？ – SaiUnique

你是否得到裝載機？ –

那麼，不知道爲什麼這不起作用（我忘了什麼？）...這是我的網站：http://new.wearegoingsolo.com/tracks/paperwhite-wash-us-away – GoingSolo

做到這一點，你的模板替換/home路線，不以/home模板中刪除ng-if，並且必須是你的主頁

的index.html

<!DOCTYPE html> 
<html ng-app="app"> 

    <head> 
    <script data-require="[email protected]" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script data-require="[email protected]" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script> 
    <script data-require="[email protected]" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.2.16/angular-route.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <main ng-controller="mainCtrl"> 
     <loading ng-if="showSpin"></loading> 
     <div ng-view="" ng-if="!showSpin"></div> 
     <!--<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>--> 
    </main> 
    </body> 

</html>

的script.js

//代碼去這裏

angular.module('app', ['ngRoute']) 
    .controller('mainCtrl', function($rootScope,$scope, $timeout) { 
     $rootScope.showSpin = true; 

    $rootScope.$on('$routeChangeStart', function(event, toState, toParams, fromState, fromParams){ 
     $timeout(function(){$rootScope.showSpin = true; 
     $scope.showSpin = true;}, 5000); // Just addedto show loader, you can remove the `$timeout` 
    }); 
    $rootScope.$on('$routeChangeSuccess', function(event, toState, toParams, fromState, fromParams){ 
     $timeout(function(){$rootScope.showSpin = false; 
     $scope.showSpin = false;}, 5000); // Just addedto show loader, you can remove the `$timeout` 
    }); 
}) 
.directive('loading', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     template: '<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>', 
     link: function(scope, element, attr) { 
      scope.$watch('showSpin', function(newVal) { 
       if (newVal) 
        $(element).show(); 
       else 
        $(element).hide(); 
      }); 
     } 
    } 
}) 
.config(function($routeProvider) { 
    $routeProvider 
     .when('/home', { 
      url: '/home', 
      template: '<div>Hello world!</div>', 
      controller: function($scope) { 
      } 
     }) 
     .when('/example', { 
      url: '/example', 
      template: '<div>Hello Example!</div>', 
      controller: function($scope) { 
      } 
     }) 
     .otherwise({ redirectTo: '/example' }) 
})

UPDATED ANSWER 我已更新答案。請檢查

工作plunker

來源

2017-05-29 09:54:38

如果裝載機顯示，告訴我，我會更新答案 –

嘗試與此，但仍然沒有顯示微調 – GoingSolo

請讓一個只有微調和路線（狀態）的笨蛋。 –

加載ng-view之前的空白預加載器

回答

相關問題