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

Question

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

我第一次使用ui路由器，它一直很好，除了这一件事：我需要传递一个参数到嵌套视图。

想法是，一个小部件列表，每个小部件都有一个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小号widget对象，并且它是通过范围继承从子视图内的属性。因此，从内blebleh.html和blablah.html您只需使用可以访问相应widgetId S：

{{ widget.widgetId }} 

这工作，因为每个ui-view创建范围继承由ng-repeat的每个循环（这对于每个创建一个单独的范围内创建范围widget）。

UPDATE

虽然上面仍然站立，回头看你的问题，我不认为我直接回答了这个问题。

如何通过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