如果有特定的 GET 参数，如何对每个 AngularJS UI 路由执行相同的逻辑？

Question

我有这个情况想解决：

1.User访问linktest.dev/hello?user=Ali会显示alert"Hi Ali"

2.User访问linktest.dev/about?user=Ali会显示alert"Hi Ali"

简而言之，对于我拥有的每个 ROUTES，我都想执行 GET 参数 USER 并显示它

例如，这是我从互联网上获取的示例路线：

var myApp = angular.module('helloworld', ['ui.router']);

myApp.config(function($stateProvider) {
  var helloState = {
    name: 'hello',
    url: '/hello',
    controller: helloController,
    template: '<h3>hello world!</h3>'
  }

  var aboutState = {
    name: 'about',
    url: '/about',
    controller: aboutController,
    template: '<h3>Its the UI-Router hello world app!</h3>'
  }

  $stateProvider.state(helloState);
  $stateProvider.state(aboutState);
});

当前解：

创建一个通知服务，使用函数 notifyUser() 获取 StateParams 并提醒它
向所有路由控制器注入NotificationService，并调用notifyUser()
如果有任何新的 Route Controller，请继续重复步骤 2

问题：

我发现我目前实施的这个解决方案不是 DRY，因为我需要为每个尚未实施它的新控制器重复步骤 2。

阅读某处我们可以使用 RootScope 并在 RootScope 中调用服务，但我们仍然需要在每个控制器中调用 notifyUser()。

问题：

有没有更好的方法来处理这种情况？我们如何在保持 DRY 的同时实现它？

感谢您的见解

Answer 1

您可以定义一个 transition hook 并在那里执行您的操作。

$transitions.onSuccess({}, function(transition) {
  ...
});

回调可以访问一个参数，它是一个 transition 对象。您可以探索它，并可以使用它来获取查询参数的值。

编辑 1:

如果您使用的是旧版本的 UI 路由器，您可以利用 State Change Events 来做同样的事情。您需要在根作用域上定义一个更改侦听器：

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
  ...
});

如果有特定的 GET 参数，如何对每个 AngularJS UI 路由执行相同的逻辑？

How to perform same logic for every AngularJS UI route if having certain GET parameter?

angularjs

angular-ui-router

dry