Question

更新：我可以通过使用setTimeOut函数来避免。我把时间轴控制器中的所有config或init函数放入setTimeOut函数，但我真的不明白ngAnimate

我有一个带有一些模板的Angular应用程序，我使用 ngRoute 进行切换。在模板及其控制器中，我使用 google maps API 创建了一个地图视图。如果我没有将 ngAnimate 注入我的应用模块，那么每件事都可以。

但是，如果我将 ngAnimate 注入我的app模块：

如果我使用路由到此模板，则googleMapsAPI 无效，但在控制台中没有任何错误抛出。
我使用sly.js制作时间轴滑块。它的init函数也不起作用。
如果我刷新此模板（F5），一切正常。

我的代码就是这样：

我的模块文件

var app = angular.module("application", ['application.services','ngAnimate','ngRoute','angular-loading-bar']);

app.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
    templateUrl: base_url + "/index.php" + "/app/home",
    controller: "homeCtrl"
})
.when('/search', {
    templateUrl: base_url + "/index.php" + "/app/search",
    controller: "searchCtrl"
})
.when('/lesson/:lessonId', {
    templateUrl: base_url + "/index.php" + "/app/lesson",
    controller: "lessonCtrl"
})
.when('/groups/:groupId', {
    templateUrl: base_url + "/index.php" + "/app/groups"
})
.when('/timeline/:region', {
    templateUrl: base_url + "/index.php" + "/app/timeline",
    controller: "timelineCtrl"
})
.when('/timeline', { redirectTo: '/timeline/vn' })
.otherwise({ redirectTo: '/home' });

我的时间线控制器文件

angular.module("application")
.controller('timelineCtrl', function($scope, $http, $routeParams, $location, mapTimelineProcess, renderProcess, BASE_URL) 
{   

if($routeParams.region != 'vn' && $routeParams.region != 'wo') {
    $location.path('/');
}

$scope.events = [];
$scope.timeline = [];
var swFlag = 0;

$scope.region = $routeParams.region; // Choose VN or WO Timeline

$scope.curCentury = 0;
$scope.curYear = 0;

// Create map
$scope.$on('$routeChangeSuccess', function() {
    mapTimelineProcess.initialMap();
})

// Congigure Slider
mapTimelineProcess.slidersInit();
... ...

在我的视图中

<script type="text/javascript" src="<?php echo base_url() ?>assets/js/vendor/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/modernizr.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/script.js"></script>

<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzmqGgteQuwwllDX9QmG60gVjP6laXDBc">
</script>                       

<!-- AngularJS Setting -->
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/vendor/angular.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/vendor/angular-route.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/vendor/angular-animate.min.js"></script>


<link rel="stylesheet" href="<?php echo base_url() ?>assets/css/loading-bar.css">
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/loading-bar.js"></script>

<script>
    var base_url = '<?php echo base_url(); ?>';
</script>

<script type="text/javascript" src="<?php echo base_url() ?>assets/js/modules/services/app-services.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/modules/services/app-timeline-services.js"></script>

<script type="text/javascript" src="<?php echo base_url() ?>assets/js/modules/application.js"></script>

<script type="text/javascript" src="<?php echo base_url() ?>assets/js/modules/controllers/app-home-ctrl.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/modules/controllers/app-timeline-ctrl.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/modules/filters/app-filters.js"></script>
... ...

<div class="main-page"> 
    <div id="main-content" ng-view>

    </div> <!-- Main Content -->
</div> <!-- Main Page -->

谁能给我一个建议，谢谢你

AngularJs：路由时的ngAnimate问题

0 个答案: