将参数与 UIRouter 和组件一起使用

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”起作用？我基本上想要的是列出所有项目的页面，一旦我点击一个 link 我需要 url 类似于“example.com/project/{projectId}

你对我有什么建议吗？

Answer 1

将状态 projectDetails 更改为 projects.details。另外，给它自己的控制器，例如：

  .state('projects.details',{
     url:'/project/:id',
     template : '<project-detail></project-detail>'
     controller : 'ProjectDetailsCtrl as projectDetailsCtrl'
  });

并且在您的 ProjectDetailsCtrl 中，您将可以访问 $stateParams。例如

.controller('ProjectDetailsCtrl',['$stateParams',function ProjectDetailsCtrl($stateParams){
    console.log($stateParams.id);
}])

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

将参数与 UIRouter 和组件一起使用

Use parameters with UIRouter and Components

angularjs

angularfire

angular-ui-router