2015-12-14 72 views
2

不知道我在這裏做了什麼錯誤。只是基本上設置路徑來顯示一個GIF時,頁面加載與CSS動畫。 gif顯示出來,但一切都消失了,gif停留在頁面上,並且在控制檯中收到「TypeError:d [h] .apply不是函數」錯誤。任何幫助表示讚賞。 下面是代碼:TypeError:d [h] .apply不是函數

HTML:

<!DOCTYPE html> 
<html lang="en" ng-app="OWMApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Open Weather Map App</title> 
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="app/owm-app.css"> 
</head> 
<body ng-class="{loading: isLoading}"> 
    <div class="container"> 
     <a href="#/">Home</a> 
     <a href="#/cities/New York">New York</a> 
     <a href="#/cities/Dallas">Dallas</a> 
     <a href="#/cities/Chicago">Chicago</a> 
     <a href="#/cities/NotOnList">Unsupported city</a> 
     <div class="animate-view-container"> 
      <div ng-view class="animate-view"></div> 
     </div> 
     <script type="text/javascript" src="bower_components/angular/angular.min.js"></script> 
     <script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script> 
     <script type="text/javascript" src="bower_components/angular-animate/angular-animate.min.js"></script> 
     <script type="text/javascript" src="app/owm-app.js"></script> 
    </div> 
</body> 
</html> 

CSS:

body, html { position: relative; min-height: 100%;} 
.loading { 
    position: relative; 
    height: 100%; 
} 
.loading:before { 
    position: absolute; 
    content: ""; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    top: 0; 
    z-index: 1000; 
    background: rgba(255, 255, 255, 0.9) no-repeat center center; 
    background-image: url('./loading-animation.gif'); 
} 
.animate-view-container { position: relative; min-height: 100%; } 
.animate-view.ng-enter, 
    .animate-view.ng-leave { 
     transition: 1s linear all; 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     background: #eee; 
    } 
.animate-view.ng-enter { opacity: 0; z-index:100; } 
.animate-view.ng-enter.ng-enter-active { opacity: 1; } 
.animate-view.ng-leave { opacity: 1; z-index: 99; } 
.animate-view.ng-leave.ng-leave-active { opacity: 0; } 

JS:

angular.module('OWMApp', ['ngRoute', 'ngAnimate']) 
    .value('owmCities', ['New York', 'Dallas', 'Chicago']) 
    .config(['$routeProvider', function($routeProvider){ 
     $routeProvider.when('/', { 
      templateUrl: 'home.html', 
      controller: 'HomeCtrl' 
     }) 
     .when('/cities/:city', { 
      templateUrl: 'city.html', 
      controller: 'CityCtrl', 
      resolve: { 
       city: function(owmCities, $route, $location) { 
        var city = $route.current.params.city; 
        if(owmCities.indexOf(city) == -1){ 
         $location.path('/error'); 
         return; 
        } 
        return city; 
       } 
      } 
     }) 
     .when('/error', { 
      template: '<p>Error - Page Not Found</p>' 
     }); 
    }]) 
    .controller('HomeCtrl', ['$scope', function($scope){ 

    }]) 
    .controller('CityCtrl', function($scope, city){ 
     $scope.city = city; 
    }) 
    .run(function($rootScope, $location){ 
     $rootScope.$on('$routeChangeError', function(){ 
      $loaction.path('/error'); 
     }); 
     $rootScope.$on('$routeChangeStart', function(){ 
      $rootScope.isLoading = true; 
     }); 
     $rootScope.$on('$routeChangeSuccess', ['$timeout', function(){ 
      $timeout(function(){ 
       $rootScope.isLoading = false; 
      }, 1000); 
     }]); 
    }); 
+0

您所提供的電話'apply'代碼無。想必你將一些不是函數的東西傳遞給某些需要函數的庫代碼。在瀏覽器中打開開發者工具,設置調試器暫停異常,然後用它來追蹤哪些值應該是一個函數,但不是。 – Quentin

+0

好吧,會經歷的。謝謝回覆。 –

回答

2

的錯誤是在這裏:

$rootScope.$on('$routeChangeSuccess', ['$timeout', function(){ 
    $timeout(function(){ 
     $rootScope.isLoading = false; 
    }, 1000); 
}]); 

只需移除$timeout的數組,然後僅留下函數作爲$on的第二個參數。

$rootScope.$on('$routeChangeSuccess', function(){ ... 

依賴注入應該在這裏完成(其它DEPS):

.run(function($rootScope, $location, $timeout){ ... 

相關文檔:https://docs.angularjs.org/api/ng/type/$rootScope.Scope

+0

它的工作!好好注意那個。謝謝您的幫助! –