编辑：

Question

我正在创建一个angularjs应用，我的app.js如下：

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

capValueRecruitApp.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'views/home.html',
      controller: 'offresController'
    })
    .state('offres', {
      url: '/offres',
      templateUrl: 'views/offres.html',
      controller: 'offresController'
    })
    .state('offres.detail', {
      url: '/offres/:id',
      templateUrl: 'views/offres.detail.html',
      controller: 'offresController'
    });
  $urlRouterProvider.otherwise('/home');
});

当我进入#/offres时，我会在offres.html页面中获得一个优惠列表，当我进入#/offres/5以获取offres.detail.html中的密钥5时，我想要{1}}。

在ui路由文档中我使用/ offres /：id解决了这个问题，并且在控制器中我测试了传递给url的参数是否存在如下：

capValueRecruitApp.controller('offresController', function($scope, offresFactory, $stateParams) {
  console.log($stateParam.id);
  offresFactory.getList().then(function(list) {
    $scope.offres = list.data;
    console.log($scope.offres);
  }, function(msg) {
    alert(msg);
  });

});

但当我输入#/offres/5时，应用程序会将我路由到/home的默认路由。

我该如何解决？

编辑：

我做了以下修改后发现：

.state('offres.detail', {
      url: '/:id',
      templateUrl: 'views/offres.detail.html',
      controller: 'offresController',
      resolve: {
        offresDetail: ['offresFactory', '$stateProvider', function(offresFactory, $stateProvider) {
          return offresFactory.getOffresDetail($stateProvider.id);
        }]
      }
    })

并在控制器中：

capValueRecruitApp.controller('offresController', function($scope, offresFactory, offresDetail) {
  offresFactory.getList().then(function(list) {
    console.log(offresDetail.data);
    $scope.offres = list.data;
    console.log($scope.offres);
  }, function(msg) {
    alert(msg);
  });


});

和我的工厂：

capValueRecruitApp.factory('offresFactory', function($http) {
    var factory = {
        getList: function() {
            return $http.get('http://localhost:8080/offres')
                .then(function(response) {

            return response;

                }, function(error) {
                    return 'There was an error getting data';
                });
        },
    getOffresDetail: function(id) {
      return $http.get('http://localhost:8080/offres/'+id)
        .then(function(response) {
          console.log(id);
          return response;

        }, function(error) {
          return 'There was an error getting data';
        });
    }
    };
    return factory;
});

你可以看到我在工厂里有两个console.log来测试id而另一个用来测试offresDetail.data但是我看不到控制台中的任何消息而且视图没有＆＃ 39; t注入，我都看不到一些错误信息。

Answer 1

定义子状态时，它的url相对于父状态。所以在你的情况下你定义了这个状态：＆＃34; / offres / offres / 5＆＃34;。因此，只需将子状态的url更改为相对于父状态，如下所示：

.state('offres.detail', {
    url: '/:id',  // <-- change to this
    templateUrl: 'views/offres.detail.html',
    controller: 'offresController'
});

我还建议您解决状态控制器所需的数据。例如：

.state('offres.detail', {
    url: '/:id',
    templateUrl: 'views/offres.detail.html',
    controller: 'offresController',
    resolve: {
        offresDetail: ['offresFactory', '$stateProvider', function(offresFactory, $stateProvider) {
            return offresFactory.getOffresDetail($stateProvider.id);
        }]
    }
});

并且控制器中只传递已解析的数据：

capValueRecruitApp.controller('offresController', function($scope, offresDetail) {
    $scope.offresDetail = offresDetail.data;
});

您应该在服务中处理错误消息。

在angularjs中使用url参数

编辑：

1 个答案: