Wie man route Parameter in Vorlage mit UI-Router erhalten?

Question

Ich habe Code wie folgt aus:

$stateProvider 
    .state('managementPanels-show', { 
    url: '/management-panels/show/:id', 
    template: '<mp-show></mp-show>', 
    data: {}, 
    resolve: {} 
    }); 

wie kann ich hinzufügen: id der Vorlage?

Answer 1

Sie können nicht direkt auf die :id Vorlage zugreifen. Sie müssen den $stateParams Dienst in Ihrem Controller und setzen die :id Eigenschaft auf Controller $scope

.controller('YourController', function ($scope, $stateParams){ 
    $scope.id = $stateParams.id; 
}) 

in Ihrer Vorlage injizieren jetzt können Sie ID als Zugang:

$stateProvider 
    .state('managementPanels-show', { 
    url: '/management-panels/show/:id', 
    template: '<mp-show>{{id}}</mp-show>', 
    controller: 'YourController', 
    data: {}, 
    resolve: {} 
    }); 

Answer 2

Verwenden $ stateParams. Lesen Sie mehr über sie here

console.log($stateParams.id); 

Answer 3

Ich möchte einfach die good answer from Aditya integrieren, als ich eine Stunde auf dieser Ausgabe verbringen:

, wenn Sie die ‚id‘ passieren müssen als „<“ Parameter zu Ihrer Komponente zu „<“ ‚param‘ ohne geschweifte Klammern bestanden

$stateProvider 
    .state('managementPanels-show', { 
    url: '/management-panels/show/:id', 
    template: '<mp-show param="id">{{id}}</mp-show>', 
    controller: function ($scope, $stateParams){ $scope.id = $stateParams.id; }, 
    data: {}, 
    resolve: {} 
}); 

Beachten Sie die ‚id‘:, Sie müssen geschweifte Klammern nicht verwenden. Auf der anderen Seite bleiben "@" Parameter als param = "{{id}}".

Beachten Sie auch: Ich schrieb den Controller direkt in die Zustandsdefinition, nur aus Gründen der Einfachheit.

Answer 4

Wenn Sie häufig $ state und $ stateParams in Ihre Vorlagen integrieren möchten, ist es möglicherweise hilfreich, sie hinzuzufügen, indem Sie sie $ scope oder $ rootScope zuweisen. Siehe das folgende Beispiel aus dem Text & Tabellen:

angular.module("myApp").run(function ($rootScope, $state, $stateParams) { 
    $rootScope.$state = $state; 
    $rootScope.$stateParams = $stateParams; 
}); 

Jetzt können Sie Datenwerte auf $ Umfang und interpolieren rootScope $ mit Angular der doppelten geschweiften Klammer-Notation.

Config:

$stateProvider 
    .state('content', { 
     url: "/", 
     data: { 
      title: 'test' 
     } 
    }) 

Vorlage:

{{ $state.current.data.title }} 

Quelle: https://github.com/angular-ui/ui-router/wiki/quick-reference#note-about-using-state-within-a-template