Question

我总是使用ngRoute来满足我的路由需求，直到我需要嵌套视图。

我第一次使用ui-router，而且它一直很好，除了这一件事：我需要将参数传递给嵌套视图。

这个想法是，一个小部件列表，每个小部件都有一个id。我希望嵌套视图控制器可以使用该ID。

这是对我所拥有的一个虚构的想法：

home.html的

<li data-ng-repeat="widget in vm.widgets">
    <div ui-view="{{widget.template}}"></div>
</li>

app.config（部分......）

.state('home', {
        url: '/home',
        views: {
            '': {
                controller: 'HomeController',
                controllerAs: 'vm',
                templateUrl: 'Scripts/app/home/home.html'
            },
            'blebleh@home': {
                controller: 'BleblehController',
                controllerAs: 'vm',
                templateUrl: 'Scripts/app/views/blebleh.html'
            },
            'blablah@home': {
                controller: 'BlablahController',
                controllerAs: 'vm',
                templateUrl: 'Scripts/app/views/blablah.html'
            }
        }
    })

所以，让我们说vm.widgets我有以下内容：

[
    {
        widgetId: 1,
        template: 'blablah'
    },
    {
        widgetId: 2,
        template: 'blebleh'
    }
]

如何将1（widgetId）传递给BlablahController和2（widgetId）传递给BleblehController？

我用$ stateParams尝试过一些东西，但没有成功。无法在任何地方找到解决方案或答案。

由于

Answer 1

如果您的路线设置如下：

app.config(function($stateProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      views: {
        '': {
          controller: 'HomeController',
          controllerAs: 'vm',
          templateUrl: 'home.html'
        },
        'blebleh@home': {
          controller: 'BleblehController',
          controllerAs: 'vm',
          templateUrl: 'blebleh.html'
        },
        'blablah@home': {
          controller: 'BlablahController',
          controllerAs: 'vm',
          templateUrl: 'blablah.html'
        }
      }
    })
});

和你的home.html一样：

<div data-ng-repeat="widget in vm.widgets">
    <div ui-view="{{ widget.template }}"></div>
</div>

您应该能够通过范围继承从子视图中访问ng-repeat s widget对象及其属性。因此，您可以在blebleh.html和blablah.html内使用以下内容访问相应的widgetId：

{{ widget.widgetId }}

这是有效的，因为每个ui-view创建的范围都会继承ng-repeat的每个循环创建的范围（为每个widget创建一个单独的范围。）

<强>更新

虽然上述情况仍然有效，但回顾你的问题，我不认为我是直接回答的。

如何将widgetId传递给BlablahController / BleblehController ？

答案是执行上述操作（利用范围继承）并将其从$scope服务中删除并在各自的控制器中使用它，例如：

app.controller('BleblehController', function($scope) {
  var vm = this;
  vm.myWidgetId = $scope.widget.widgetId;
});

app.controller('BlablahController', function($scope) {
  var vm = this;
  vm.myWidgetId = $scope.widget.widgetId;
});

Example Plunk

UI路由器：如何将参数传递给嵌套视图

1 个答案: