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