使用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) }])