Question

我正在创建一个angularjs应用程序，我必须将用户的公司名称推送到url。例如，www.myapp.com / samsung或www.myapp.com/toyota。

我实现的策略是首先检索用户的公司信息并获取公司名称，然后使用ui-router的$ stateParams将名称推送到url。

我能够推送参数，但它不会改变网址的形状。该网址与www.myapp.com保持一致。

有谁知道怎么弄清楚这个？感谢

//main controller
$rootScope.$on('$stateChangeSuccess', function (e, toState, toParams, fromState, fromParams) {
 toParams = {company: $scope.user.company.nickname};//$scope.user.company.nickname contains company's name
});

//$stateProvider configuration
$stateProvider
.$state('home', {
  url: '/:company',
  ...
  ...
})

Answer 1

UI-Router 1.0及更高版本可以使用onEnter Transition Hook实现此目的。

钩子检查参数值是否设置。如果未设置（null），则会将转换重定向到相同的状态，但设置参数值。

  $stateProvider.state({ 
    name: 'company', 
    url: '/:companyName', 
    params: { companyName: null }, // default to null
    onEnter: function ($transition$, $state, company)  {
      let params = $transition$.params();
      if (params.companyName === null) { // check if null. Get resolve and redirect
        return $state.target("company", { companyName: company.name });
      }
    },
    resolve: { 
      company: ($http) => 
          $http.get('company.json').then(resp => resp.data)
    },
    component: 'company',
  });

这是一个工作的掠夺者：http://plnkr.co/edit/aSJh6QyBUymKmaFNsOS8?p=info

Answer 2

如果您只想更改网址而不重新加载您可以使用的网页：

var nameOfCompany = "toyota";
$location.url('/nameOfCompany');

$location是Angular的window.location的等价物，它可用于观察和更改网址而无需重新加载。查看documentation了解详情。

Answer 3

我可以通过ui-router 0.3x版本实现我想要的功能。代码可能看起来很脏，但它可以像我想象的那样工作。希望它可以帮助那些找到相同功能的人。

.state('home', {
    url: '/:company',
    params: {company: null},
    templateUrl: '/templates/home.html',
    onEnter: ['error', 'auth', '$state', 'company', '$stateParams', function (error, auth, $state,     company, $stateParams) {
        if (!auth.isLoggedIn()) {
            return error.flash('Login is required.', 'login');
        }
        try {
            if ($stateParams.company === null || $stateParams.company !== company.nickname) {
                $state.go('home', {company: company.nickname});    
            }
        } catch (err) {
            console.log('mop');
        }
    }],
    resolve: {
        company: ['auth', 'error', function (auth, error) {
            return auth.getMyCompany().then(function (res) {
                return res.data;
            }, function (err) {
                error.flash(401, 'login');
            });
        }],
    },
})

将参数推送到angularjs中的URL

3 个答案: