Question

大家好，我在使用ui路由器和参数时遇到了一些问题。

我正在使用angularfire，我的所有数据都在firebase中。

//This is my router
.config(function($stateProvider, $urlRouterProvider){
 $stateProvider
  .state('home', {
    url :'/home',
    template :'<home></home>'
  })
  .state('projects', {
    url:'/projects',
    template:   "<project-list></project-list>"
  })
  .state('projectDetails',{
    url:'/project/:id',
    template : '<project-detail></project-detail>'

  });
  $urlRouterProvider.otherwise('home');
})

这是组件projectList中的控制器

function ProjectListController($scope, $element, $attrs, $firebaseArray, $stateParams) {
var ctrl = this;


 var projects_ref = firebase.database().ref().child("projects");
 var projects = $firebaseArray(projects_ref);
 });


 ctrl.details = function (project) {

      //$state.go('project-details', {: project.$id});
      console.log(project.$id);
      projectId = project.$id;
      return projectId;


  }

我如何让“：id”起作用？我基本上想要的是有所有项目列出的页面，一旦我点击一个链接，我需要的网址是“example.com/project/{projectId}

你对我有什么建议吗？

Answer 1

将州List更改为projectDetails。另外，给它自己的控制器，例如：

projects.details

在您的.state('projects.details',{ url:'/project/:id', template : '<project-detail></project-detail>' controller : 'ProjectDetailsCtrl as projectDetailsCtrl' });中，您可以访问ProjectDetailsCtrl。 e.g。

$stateParams

使用.controller('ProjectDetailsCtrl',['$stateParams',function ProjectDetailsCtrl($stateParams){ console.log($stateParams.id); }])通过控制器触发项目导航，假设$state.go('projects.detail',{id:projectId});是项目ID为值的变量。或者通过使用projectId的元素，假设ui-sref="projects.detail({id:projectId})可用作您视图的数据。

使用UIRouter和Components的参数

1 个答案: