Question

我有这样的代码：

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

如何在模板中添加：id？

Answer 1

您无法直接访问模板中的:id。您需要在控制器中注入$stateParams服务并在控制器:id上公开$scope属性

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

现在，您可以在模板中访问ID：

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

Answer 2

如果您计划在模板中经常集成$ state和$ stateParams，那么将其添加到$ scope或$ rootScope可能会很有用。请参阅文档中的以下示例：

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

现在，您可以使用Angular的双花括号表示法在$ scope和$ rootScope上插入数据值。

<强>配置：

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

<强>模板：

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

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

Answer 3

使用$ stateParams。阅读它here

console.log($stateParams.id);

Answer 4

我只想整合good answer from Aditya，因为我花了一个小时来解决这个问题：

如果你必须通过＆＃39; id＆＃39;作为＆＃34;＆lt;＆＃34;组件的参数，不能使用花括号：

$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: {}
});

请注意＆＃39; id＆＃39;传递给＆＃34;＆lt;＆＃34; ＆＃39; PARAM＆＃39;没有花括号。另一方面，＆＃34; @＆＃34;参数仍为param =＆＃34; {{id}}＆＃34;。

另请注意：我将控制器直接写入状态定义，只是为了简单起见。

Answer 5

使用自定义模板和注入参数的另一种方法是使用templateProvider：

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

所有注射剂都可用，而不仅仅是$stateParams 重要的是要记住，templateProvider会返回template，而不是templateUrl！

如果需要使用带有templateUrl的参数，它还会接受一个只有$stateParams参数的函数（羞耻）：

$stateProvider
  .state('managementPanels-show', {
    url: '/management-panels/show/:id',
    templateUrl: function($stateParams){ return 'templates/mytemplate/' + $stateParams.id; },
    data: {},
    resolve: {}
  });

如何使用ui-router获取模板内的路由参数？

5 个答案: