UI Router: Wie man Parameter verschachtelten Ansichten übergeben

Question

Ich habe immer ngRoute für meine Routing-Bedürfnisse verwendet, bis ich verschachtelte Ansichten benötigt.

Ich benutze UI-Router zum ersten Mal, und es ist gut gelaufen, außer für diese eine Sache: Ich muss einen Parameter an die verschachtelten Ansichten übergeben.

Die Idee ist, eine Liste von Widgets, jedes hat eine ID. Ich möchte diese ID für den verschachtelten View-Controller verfügbar machen.

Hier ist eine fiktive Vorstellung davon, was ich habe:

home.html

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

app.config (Teil ...)

.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' 
      } 
     } 
    }) 

So lassen Sie uns sagen, ich habe Folgendes für vm.widgets:

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

Wie kann ich 1 (widgetId) an BlablahController und 2 (widgetId) an BleblehController übergeben?

Ich habe ein paar Dinge mit $ StateParams versucht, aber keinen Erfolg. Konnte nirgendwo eine Lösung oder Antwort finden.

Dank

Answer 1

Wenn Sie Ihre Routen wie folgt aufgebaut:

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' 
     } 
     } 
    }) 
}); 

und Ihre home.html wie folgt aus:

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

Sie sollten die ng-repeat s widget Objekt zuzugreifen können und Eigenschaften aus den untergeordneten Ansichten über die Vererbung des Gültigkeitsbereichs. So aus blebleh.html und blablah.html können Sie die jeweiligen widgetId s zugreifen einfach mit:

{{ widget.widgetId }} 

Das funktioniert, weil die von den einzelnen ui-view erstellt Umfang den Umfang von jeder Schleife der ng-repeat erstellt erbt (die für jeweils einen separaten Rahmen schafft widget). Ich glaube nicht, dass ich antwortete sie direkt

UPDATE

Während die oben steht nach wie vor, auf Ihre Frage zurückblicken.

Wie widgetId-BlablahController/BleblehController passieren?

Die Antwort ist es, die oben tun (Vorteil Umfang Vererbung nehmen) und den $scope Service fegen und es in Ihren jeweiligen Controller verwenden zB:

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