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);
}]);
});
您所提供的電話'apply'代碼無。想必你將一些不是函數的東西傳遞給某些需要函數的庫代碼。在瀏覽器中打開開發者工具,設置調試器暫停異常,然後用它來追蹤哪些值應該是一個函數,但不是。 – Quentin
好吧,會經歷的。謝謝回覆。 –