Question

不确定我在这里做错了什么。基本上设置路由以在页面加载css动画时显示gif。 gif出现但一切都淡出，gif停留在页面上，我收到控制台中的“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);
        }]);
    });

Answer 1

错误在于：

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

只需删除$timeout的数组，只留下$on的第二个参数。

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

依赖注入应该在这里完成（和其他代表一样）：

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

相关文档：https://docs.angularjs.org/api/ng/type/$rootScope.Scope

TypeError：d [h] .apply不是函数

1 个答案: