Angular1中使用$routeProvider时跨页面正确执行JS的方法

我来帮你搞定这个问题！你遇到的核心问题是：当多个路由复用同一个PageCtrl控制器时，Angular只会在第一次加载对应路由时初始化控制器实例，后续切换到同控制器的路由时，不会重新创建控制器，所以控制器里的$scope.menuCtrl()只会执行一次，切换页面后就不再触发了。

下面给你几个可行的解决方案，按最佳实践排序：

方案1：使用路由切换事件（最直接） #

通过监听$routeChangeSuccess事件，每次路由切换完成后执行你的代码。这个事件在所有路由切换成功后都会触发，不管是不是同一个控制器。

修改你的控制器代码：

app.controller('PageCtrl', function ($scope, $rootScope) { 
  $scope.menuCtrl = function(){ 
    // 这里放你需要跨页面执行的代码
    console.log("跨页面代码执行了！");
  }; 

  // 监听路由切换成功事件，每次切换都执行menuCtrl
  $rootScope.$on('$routeChangeSuccess', function() {
    $scope.menuCtrl();
  });

  // 第一次加载页面时先执行一次
  $scope.menuCtrl(); 
}); 

方案2：将复用逻辑抽成服务（Angular最佳实践） #

把跨页面需要执行的逻辑放到服务里，控制器只负责调用服务方法。这样不仅解耦代码，还能在任何地方复用这段逻辑。

首先创建一个服务：

app.service('PageInitializer', function() {
  this.runInitCode = function() {
    // 这里放跨页面执行的核心逻辑
    console.log("服务中的初始化代码执行了！");
  };
});

然后修改控制器：

app.controller('PageCtrl', function ($scope, $rootScope, PageInitializer) { 
  // 监听路由切换事件，调用服务方法
  $rootScope.$on('$routeChangeSuccess', function() {
    PageInitializer.runInitCode();
  });

  // 首次加载执行
  PageInitializer.runInitCode(); 
}); 

方案3：为每个路由配置独立的初始化逻辑（适合页面有差异的情况） #

如果不同页面需要执行不同的初始化代码，可以在路由的resolve属性中定义，resolve里的方法会在路由加载、控制器初始化之前执行：

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 
  $locationProvider.html5Mode(true); 
  
  $routeProvider.when("/", { 
    templateUrl: "partials/home.html", 
    controller: "PageCtrl",
    resolve: {
      initHome: function() {
        // 首页专属初始化代码
        console.log("首页初始化完成");
        return true;
      }
    }
  }) 
  .when("/pricing", { 
    templateUrl: "partials/pricing.html", 
    controller: "PageCtrl",
    resolve: {
      initPricing: function() {
        // 定价页专属初始化代码
        console.log("定价页初始化完成");
        return true;
      }
    }
  }) 
  .otherwise("/404", { 
    templateUrl: "partials/404.html", 
    controller: "PageCtrl",
    resolve: {
      init404: function() {
        console.log("404页初始化完成");
        return true;
      }
    }
  }); 
}]); 

为什么你的原代码不行？ #

再给你补个知识点：Angular的路由在遇到同一个控制器时，会复用已经存在的控制器实例，不会重新执行控制器构造函数里的代码。所以你原代码中的$scope.menuCtrl()只会在第一次进入任意绑定PageCtrl的路由时执行一次，后续切换页面就不会再跑了。

内容的提问来源于stack exchange，提问作者timber535