Angular表单提交创建供应商后，如何通过ui-sref功能跳转至其详情页

嘿，这个问题很好解决！既然你已经能获取到新创建供应商的ID，只需要借助AngularJS的$state服务来实现路由跳转就可以了，具体步骤如下：

• 1. 注入$state服务到你的控制器
  首先要确保在处理创建逻辑的控制器里注入$state服务，这样才能调用它的跳转方法。示例代码如下：

  angular.module('yourApp').controller('CreateProviderCtrl', ['$state', '$http', function($state, $http) {
    // 你的创建逻辑会在这里实现
  }]);
  

• 2. 在创建成功后调用$state.go()跳转
  当你通过API成功创建供应商并拿到新ID后，直接调用$state.go()方法，传入你之前用的providerDetail状态名，以及对应的id参数就行。比如：

  // 假设这是你的创建请求逻辑
  $http.post('/api/providers', yourNewProviderData)
    .then(function(response) {
      const newProviderId = response.data.id; // 你已经能在控制台打印这个ID了
      // 触发跳转至新供应商的详情页
      $state.go('providerDetail', { id: newProviderId });
    })
    .catch(function(err) {
      // 别忘了处理创建失败的情况
      console.error('创建供应商出错啦:', err);
    });
  

• 小提醒
  确认一下你的providerDetail状态在路由配置里是正确接收id参数的，比如路由配置大概是这样的：

  angular.module('yourApp').config(['$stateProvider', function($stateProvider) {
    $stateProvider
      .state('providerDetail', {
        url: '/providers/:id',
        templateUrl: 'path/to/provider-detail.html',
        controller: 'ProviderDetailCtrl'
      });
  }]);
  

这样操作后，当你点击创建按钮完成供应商创建，页面就会自动跳转到新创建供应商的详情页，和你之前用ui-sref="providerDetail({id:provider.id})"的效果完全一致，只是用代码触发了跳转而已。

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