使用ui-router将参数传递给URL

Question

我一直在看这方面的例子，但我不知道我做错了什么。

我将一个项目及其内容加载到ng-view中。当我刷新页面时，它就消失了。我已经向状态的URL传递了一个参数，我不知道下一步该做什么。

人们都在谈论我可以从我的控制器上登录的$stateParams，我可以看到带有id: 3的项目已经被选中。

如何在刷新时仍使用此项目填充视图？如果能用我的代码做一个例子，我将非常感激。

var app = angular.module('myApp', ['ngRoute', 'ui.router']);

app.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', '$routeProvider',  function($stateProvider, $locationProvider, $urlRouterProvider, $routeProvider) {

    $urlRouterProvider
        .otherwise('/patents');

    $stateProvider
        .state("patents", {
            url: "/patents",
            templateUrl: "templates/patents/list/list-patents.htm",
            controller: "patentListCtrl",
        })
        .state("patents.item", {
            url: "/:id",
            templateUrl: function() {
              //THIS IS WHERE I AM NOT SURE HOW TO PASS THE URL THE ID
            },
            controller: "patentItemCtrl"
        })
}]);

app.controller('patentItemCtrl', ['$scope', 'patentTabService','$stateParams', '$state', '$routeParams', function($scope, patentTabFactory, $stateParams, $routeParams){

      console.log($stateParams.id)

}])

Answer 1

您应该能够通过调用您的数据服务来检索所需的数据，然后分配给您的视图。在本例中，调用patentTabService以获取id为的专利，然后将该专利对象加载到视图中。例如，请注意，我假设您已经有一些方法可以在您的服务中通过id获得专利：

​

app.controller('patentItemCtrl', ['$scope', 'patentTabService','$stateParams', '$state', '$routeParams', function($scope, patentTabFactory, $stateParams, $routeParams){
      $scope.patent = {};
      if (Number.isInteger($stateParams.id) ){
        $scope.patent = patentTabFactory.getPatent($stateParams.id);
      }
      
      console.log($stateParams.id)
}])

​