Использовать параметры с помощью 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; 


    } 

Как мне сделать, что ": идентификатор" работать? В основном я хочу, чтобы страница, в которой перечислены все проекты, и когда я нажимаю одну ссылку, мне нужен 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); 
}]) 

Запуск навигации по проекту с помощью контроллера с использованием $state.go('projects.detail',{id:projectId});, предполагая, что projectId является переменной с идентификатором проекта как значением. Или через элемент с использованием ui-sref="projects.detail({id:projectId}), предполагая, что projectId доступен в качестве данных к вашему представлению.