Question

我遇到了一些挑战，但还没有找到解决方案。当我尝试了几件事时，我正在寻求你的帮助，所以可能有人可以引导我走向正确的方向。

我在AngularJS中有一个routes.js。我使用$routeProvider。在每个.when()我需要调用一个函数（因为我需要用名字做一些事情）。

$routeProvider
.when('/url', { templateUrl: '', /* callMyFunction('/url'); */ })
.when('/url1', { templateUrl: '', /* callMyFunction('/url'); */ })
.when('/url2', { templateUrl: '', /* callMyFunction('/url'); */ }) ....

这只是一个例子，我知道这不会奏效。但是要告诉你我想要做什么。正如你所看到的，这会弄乱我的代码（你需要更多的东西才能使它工作，所以你将为每个.when()获得大量额外代码，并且这些代码在每个语句中完全相同（除了论证）。

所以我正在寻找一些可以在之前或之后调用的函数（只要它被调用就没有意义）.when()。

我在Stack Overflow上已经阅读了很多问题，但没有找到正确的答案。回答的大多数问题都是在控制器中。但是，我要调用的这个函数对于每条路径完全相同。因此，我不想把它放在我的所有控制器中，而只放在routes.js中，并在每个when()后调用/。

Answer 1

您正在寻找$routeChangeSuccess或$routeChangeStart之类的内容（请参阅$route）。

路线更改前

function runConfig($rootScope) {
    $rootScope.$on('$routeChangeStart', function (event, next, current) {
        if (next && next['$$route']) {
            var route = next['$$route']['originalPath'];
            //route is 'url', 'url1' or 'urlX'
            //do with it as you please
        }
    });
}

angular
        .module('app')
        .run(runConfig);

路线改变后

function runConfig($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, prev) {
        if (current && current['$$route']) {
            var route = current['$$route']['originalPath'];
            //route is 'url', 'url1' or 'urlX'
            //do with it as you please
        }
    });
}

angular
        .module('app')
        .run(runConfig);

Answer 2

如果您愿意更改为ui-router，这一切都会变得更容易。 ui-router远远优于基本Angular提供的内置路由。这是一个如何使用ui-router执行函数的简单示例。在这个例子中，我设置了一个变量的值，然后在控制器中注入该变量，并调用一个简单的函数。

'.$login.'

angular.module('app', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider.state('main', {
      url: '/',
      template: '<div>This is the main state - mainValue: {{vm.mainValue}}</div>',
      controller: 'MainController',
      controllerAs: 'vm',
      resolve: {
        mainValue: function() {
          return 2 + 2;
        },
        function() {
          console.log('this is just calling a function with no return');
        }
      }
    });
  })
  .controller('MainController', function(mainValue) {
    this.mainValue = mainValue;
  });

$ routeProvider

2 个答案: