Question

我的应用程序有两个控制器。我有pageCtrl用于处理我的导航和侧边栏。我还有calendarCtrl来处理我页面上的数据。该控制器配置如下：

$stateProvider
  .state('calendar', {
    url: '/calendar/:category/:competition/:team',
    controller: 'calendarCtrl',
    templateUrl: 'app/modules/calendar/calendarView.html',
  })

要使我的导航工作，我还需要访问:category/:competition/:team中的pageCtrl - 参数。我可以用同样的方法配置吗？类似的东西：

$stateProvider
  .state("page", {
   abstract: true,
   controller: 'pageCtrl',
   // params: :category/:competition/:team
})

修改：在$stateParams中使用calendarCtrl可以正常使用。我无法弄清楚如何确保我的pageCtrl也可以读取网址。

Answer 1

由于您正在使用ui.router，请在控制器中注入$stateParams，然后您可以像这样访问这些值：

<强> controller.js

function($stateParams){

$stateParams.category
$stateParams.competition
$stateParams.team

Answer 2

我的建议是 - 使用更多视图 - UI-Router内置功能。

Multiple Named Views

有a working plunker

让我们拥有包含此模板的 'Parent' 状态：

此蓝色是父模板。橙色是儿童观点

<!-- HERE is one named view target -->
<div ui-view="title">This is a title filled by child having access to param</div>

  ...  

<!-- HERE is other view target un-named -->
<div ui-view></div>

它的状态非常简单。有趣的是儿童国家，它关注两种观点：

  .state('parent', {
      abstract: true,
      url: "/parent",
      templateUrl: 'tpl.parent.html',
  })
  .state('parent.child', { 
      url: "/child/:id",
      views : {
        '': {
          templateUrl: 'tpl.child.html',
        },
        'title': {
          templateUrl: 'tpl.title.html',
          controller: 'TitleCtrl',
        },
      }
  })

因此，我们确实有一个“其他视图”标题或侧栏的目标。检查here

我们甚至可以在“非抽象”父状态中放置一些默认实现。

extended plunker有非抽象父状态定义：

  .state('parent', {
      url: "/parent",
      views : {
        '': {
          templateUrl: 'tpl.parent.html',
        },
        'title@parent': {
          template: 'the parent own TITLE',
        },
      }
  })

检查here

Answer 3

有一种方法，如何授予对最新/最新$stateParams的访问权限 - 包括当前状态及其子（ren）。 （working example here）

这非常容易：

.run(['$rootScope', '$state', '$stateParams',
  function ($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}])

就是这样。 （检查类似answer and some discussion here）

通过这种方法，我们甚至可以在父$scopes中更新对最新$stateParams的引用。在我们自己的时候，我们仍然会收到我们自己的部分

.controller('ParentCtrl', ['$scope', '$stateParams', function ($scope, $stateParams) {
  $scope.currentStateParams = $stateParams;
}])

上述内容适用于以下州：

.state('parent', {
  url: "/parent?area",
  templateUrl: 'tpl.html',
  controller: 'ParentCtrl',
})
.state('parent.child', { 
  url: "/child/:id",
  templateUrl: 'tpl.html',
  controller: 'ChildCtrl',
})

工作example to play here。

但我仍然会说，这有点......反对UI-Router。我会prefer this answer。因为在这种情况下，每个视图（在注入某个父区域时）都真正了解$ stateParams，它属于该状态。我们在这里做的是引入一些观察者模式（如果我们想要在父母身上做出反应，我们应该观察变化），这会带来更多问题然后获利

在主控制器中访问url params

3 个答案:

Multiple Named Views