使用 ui.route 时基于 url 更改请求 url

Question

我在 angular 中使用 $http 进行 ajax 调用，并使用 ui.router 进行 routing 调用。

路线

.state("/dashboard.inactive", {
  url: "/inactive",
  templateUrl: "angular/templates/dashboard/inactive.html",
  controller: "dashboardCtrl"
})
.state("/dashboard.drafts", {
  url: "/drafts",
  templateUrl: "angular/templates/dashboard/drafts.html",
  controller: "dashboardCtrl"
});

所以下面的代码适用于单个 URL.

控制器

app.controller('dashboardCtrl', function ($scope, DashboardFactory){
    DashboardFactory.listings(function(DashboardFactory) {
        $scope.results = DashboardFactory;
    });
});

以下工厂仅从 drafts.json 资源中获取。因此，当 URL 变为非活动状态时，我希望它分别从 inactive.json 和 active.json 获取。

工厂

app.factory('DashboardFactory', function($http){
    return {
        listings: function(callback){
            $http.get('drafts.json').success(callback);
        }
    };

});

简而言之，我需要根据 URL

向以下 3 URL 中的任何一个发送请求

1) '/drafts.json'
2) '/inactive.json'
3) '/active.json'

我可以为每个活动、非活动和草稿创建不同的控制器，并使其按预期获取。但是有没有更好的方法呢？？

Answer 1

您可以使用 ui 路线的 $state 服务来判断您处于哪个州。只需将 $state 注入您的服务，然后使用 $state.current 来访问当前状态配置。

app.factory('DashboardFactory',
     function($http, $state){ 
       return { 
          listings: function(callback){ 
              var currentView = $state.current.url.replace('/', '');
              $http.get(currentView + '.json').success(callback); 
          } 
       }; 
    });

更好的解决方案是使用 state 配置的 params 属性或添加一些自定义属性，例如：

.state("/dashboard.inactive", {
  url: "/inactive",
  templateUrl: "angular/templates/dashboard/inactive.html",
  controller: "dashboardCtrl",
  params: {
    json: 'inactive.json'
  }
})
.state("/dashboard.drafts", {
  url: "/drafts",
  templateUrl: "angular/templates/dashboard/drafts.html",
  controller: "dashboardCtrl",
  params: {
    json: 'drafts.json'
  }
});

在documentation中有描述。

使用 ui.route 时基于 url 更改请求 url

Changing a request url based on url when using ui.route

angularjs

angular-http

angular-ui-router