Question

我正在使用Angular的UI路由器，并为特定视图和控制器设置解析器设置，如下所示。如何使用从urlHasherFactory工厂返回的值更新URL？我希望在我的网址栏中填充此工厂生成的值，例如：http://example.com/user/57。在这种情况下，57是我想要填充的动态用户值，并且会根据工厂返回的内容而有所不同。

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

.config(['$stateProvider', '$urlRouterProvider', 

  function($stateProvider, $urlRouterProvider) {

    // For any unmatched url redirect to /
    $urlRouterProvider.otherwise("/");

    // States
    $stateProvider

      // Start
      .state('start', {
        url: "/",
        templateUrl: "views/_start.html",
        controller: "StartCtrl"
      })

      // Chat
      .state('chat', {
        url: "/user/:userId",
        templateUrl: "views/_user.html",
        controller: "UserCtrl",
        resolve: {
          user: function(urlHasherFactory) {
            return urlHasherFactory.getUrlHash();
          }
        }
      });

  }

])

.factory('urlHasherFactory', ['$http', function ($http) {
    var hash = {
      getUrlHash: function() {
        var promise = $http({ method: 'GET', url: '/userid' })
          .success(function(data, status, headers, config) {
            return data;
          }
        );
        return promise;
      }
    };
    return hash; 
}])

.controller('StartCtrl', ['$scope', function($scope) {

  // How do I update URL structure in here?

}])

.controller('UserCtrl', ['$scope', 'user', function($scope, user) {

  // How do I update URL structure in here with user's id
  // so it looks something like this: http://example.com/user/57

  // This is I how I access urlHasherFactory
  var urlHash = user.data.userid;

}]);

Answer 1

一种方法，如果我理解你的情况，可以1）进入chat状态而不用param userId 2）检查userId参数，如果缺少，则根据传递的用户实例重定向到chat / xxx。 plunker （简化，没有任何检查以避免cyrcle调用）及其主要部分：

'start'状态包含聊天状态的网址："ui-sref="chat()"没有参数

// States
$stateProvider

  // Start 
  .state('start', {
    url: "/",
    template: '<div>start <a ui-sref="chat()">chat</a> </div>',
  })

未更改的chat州（仅针对侦探进行调整）

  // Chat
  .state('chat', {
    url: "/user/:userId",
    template: "<div>chat for user: {{userId}}</div>",
    controller: "UserCtrl",
    resolve: {
      user: function(urlHasherFactory) {
        return urlHasherFactory.getUrlHash();
      }
    }
  })

factory未更改（仅非异步）

.factory('urlHasherFactory', ['$http', function ($http) {
    var hash = {
      getUrlHash: function() {
        return { data : { userId : 57 } };
      },
    };
    return hash; 
}])

聊天/用户 controller重定向，以防userId缺失

.controller('UserCtrl', 
  [       '$scope','$state','$stateParams','user',
  function($scope , $state , $stateParams , user) {

    if($stateParams.userId === null){

      var urlHash = user.data.userId;
      $state.go("chat", {userId : urlHash})
    }
    $scope.userId = $stateParams.userId;
}])

注意：我们应该引入一些检查以避免cyrcles，例如user.data.userId确实会为我们提供一些userId

使用工厂解析程序返回的值更新URL？

1 个答案: