с использованием параметров URL в angularjs

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, чтобы получить запись с ключом 5 в offres.detail.html.

в документации щ маршрута я решил, что с помощью/offres /: идентификатор и в контроллере я проверить существование параметра I переданного 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.

Как я могу это решить?

Edit:

После изменений, которые я сделал следующим образом:

.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 e на заводе для тестирования id, а другой для проверки offresDetail.data, но я не вижу никаких сообщений в консоли, и представление не было введено, и я также не вижу сообщения об ошибке.

Answer 1

Когда вы определяете дочернее состояние, url к нему относится к родительскому состоянию. Поэтому в вашем случае вы определили это состояние: «/ offres/offres/5». Так что просто изменить 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; 
}); 

Вы должны обработать сообщение об ошибке в службе.