$ routeProvider中每個路由的調用函數

我遇到了一些挑戰，但是還沒有找到解決方案。當我嘗試一些事情時，我會問你的幫助，所以有人可能會讓我走向正確的方向。

我在AngularJS裏有了routes.js。我有沒有使用$routeProvider。在每個.when()我需要調用一個函數（因爲我需要用名稱做一些事情）。

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

這只是一個例子，我知道這是行不通的。但給你一個想法，我想要做什麼。正如你所看到的，這會弄亂我的代碼（你需要更多的工作才能讓它工作，所以你會爲每個.when()獲得很多額外的代碼，並且這個代碼在每個語句中都完全相同（除了參數）。

於是我找了一些功能，可以之前或之後被調用（沒有意義，只要它獲取調用）.when()。

我對堆棧溢出，但在這裏閱讀大量的問題沒有找到正確的答案，大部分問題都回答了把它放在控制器中，但是我要調用的這個函數對於每條路線完全一樣，因此我不想把它放在所有的我的控制器，但只在routes.js中，並在每個when()之後調用。

來源

2017-07-06 JeroenE

您正在尋找類似於$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);

來源

2017-07-06 14:10:37 lealceldeiro

非常感謝你。這解決了我的問題！ :) – JeroenE

太棒了！我很樂意幫忙;） – lealceldeiro

如果你願意改變ui-router這一切變得更加容易。 ui-router遠遠優於基於Angular的內置路由。以下是如何使用ui-router執行功能的簡單示例。在這個例子中，我設置了一個變量的值，然後將其注入到控制器中，並調用一個簡單的函數。

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; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ui-view></div> 
 
</div>

來源

2017-07-06 14:28:20 Lex

$ routeProvider中每個路由的調用函數

回答

相關問題