AngularJs路由不重载脚本

时间:2016-09-08 18:22:55

标签: javascript jquery angularjs routing

我遇到路由问题。

当路由更改时,头部中包含的脚本在加载模板时不起作用,就好像功能被禁用或不存在一样。

main.php

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Site</title>

    <link rel="stylesheet" href="style1.css">
    <link rel="stylesheet" href="style2.css">
    <link rel="stylesheet" href="style3.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
    <script src="routes.js" type="text/javascript"></script>
    <script src="script2.js" type="text/javascript"></script>
    <script src="script3.js" type="text/javascript"></script>

    <base href="/"></base>

</head>

<body>

    <div class="page" ng-view ng-controller="myappCtrl" anim-class></div>

</body>
</html>

routes.js

'use strict';

var app = angular.module("myapp", [
    "ngRoute",
    "ngAnimate"
]);


// ROUTE CONFIG
app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){

    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });
    $locationProvider.hashPrefix('!');

  $routeProvider.
    when("/dashboard", {
      templateUrl: "dashboard.php",
      controller: "dashboardCtrl",
      animate: "slide-left"
    }).
    when("/associati", {
      templateUrl: "associati.php",
      controller: "associatiCtrl",
      animate: "slide-left"
    }).
    otherwise({
      redirectTo: "/dashboard"
    });

}]);

// PAGE ANIMATE DIRECTIVE
app.directive('animClass',function($route){
  return {
    link: function(scope, elm, attrs){
      var enterClass = $route.current.animate;
      elm.addClass(enterClass)
      scope.$on('$destroy',function(){
        elm.removeClass(enterClass)
        elm.addClass($route.current.animate)
      })
    }
  }
});

/************************************************
**************** CONTROLLER *********************
************************************************/

// MAIN CONTROLLER
app.controller("myappCtrl", function($rootScope, $scope, $location) {

});

// DASHBOARD CONTROLLER
app.controller("dashboardCtrl", function($scope) {

});

// ASSOCIATI CONTROLLER
app.controller("associatiCtrl", function($scope) {

});

每次更改css文件时都会定期包含页面,而js不再有效。

建议?

0 个答案:

没有答案