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

时间:2017-06-22 15:59:50

标签: javascript angularjs

我一直在看这个例子,但我不知道我做错了什么。

我将项目及其内容加载到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)

}])

1 个答案:

答案 0 :(得分: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)
}])