2013-06-04 8 views
5

voglio visualizzare due elementi di una pagina controllata da diverse istanze dello stesso controller, ma devo registrare alcune informazioni esterne che sarà unica (un "joystick" ottiene un set di proprietà identificative, come "player = one" mentre l'altro ottiene "player = two".) Non sono sicuro del modo migliore per farlo fuori esattamenteAngularJS riutilizzando lo stesso controller su una sola pagina, con diversa configurazione

Ecco un esempio generico di cosa sto cercando di realizzare:

<!-- These need to have different configurations --> 
<div ng-include src="'joystick/joy.tpl.html'" 
    ng-controller="JoystickCtrl">...</div> 

<div ng-include src="'joystick/joy.tpl.html'" 
    ng-controller="JoystickCtrl">...</div> 

Devo:

Utilizzare una direttiva?

<div ng-include src="'joystick/joy.tpl.html'" 
    ng-controller="JoystickCtrl" player="one">...</div> 
<div ng-include src="'joystick/joy.tpl.html'" 
    ng-controller="JoystickCtrl" player="two">...</div> 

Usa $ iniettore? (FYI - questo potrebbe essere un'implementazione non corretta)

<div ng-controller="DualJoyCtrl"> 
    <div ng-include src="'joystick/joy.tpl.html'" 
     ng-controller="joyOne" player="one">...</div> 
    <div ng-include src="'joystick/joy.tpl.html'" 
     ng-controller="joyTwo" player="two">...</div> 
</div> 

----- 

.controller('DualJoyCtrl', function ($injector, JoystickCtrl, $scope, $rootScope) { 
    $scope.joyOne = $injector.instantiate(JoystickCtrl, {$scope: $rootScope.$new(), player:"one"}); 
    $scope.joyTwo = $injector.instantiate(JoystickCtrl, {$scope: $rootScope.$new(), player:"two"}); 
}); 

Oppure ... non fare questo?

Mi rendo conto che è simile ad un altro, apparentemente inconcludente posta stack:

risposta

7

Modifica

Dal ngController viene inizializzato prima ngInit, in modo da avere i dati disponibili nel controllore in una sola volta, si dovrebbe avvolgere ngController in elemento genitore con ngInit:

<div ng-init="player = 'one'"> 
    <div ng-controller="JoystickCtrl"> 
    ... 
    </div> 
</div> 

risposta originale

Penso semplice ng-init sarebbe sufficiente:

<div ng-controller="JoystickCtrl" ng-init="player='one'">...</div> 
<div ng-controller="JoystickCtrl" ng-init="player='two'">...</div> 
+0

o creare una direttiva – Kosmetika

+0

perfetta, grazie @package – methai

+0

Vorrei aggiungere che $ scope.la proprietà del lettore NON è immediatamente disponibile per il controller, ma è disponibile nel modello. Se si '' '' console.log ($ scope.player) '' 'dal controller si otterrà undefined a meno che non sia circa 50ms o successivo dopo l'inizializzazione del controller. – methai

3

Conservare i valori di configurazione in un attributo di dati, e recuperare all'interno del controller utilizzando $attrs. (Il AngularJS ngInit documentation raccomanda di dire chiaro di ng-init meno aliasing speciale proprietà di ngRepeat.) Una risposta simile è here. Questo frammento di codice vi dà l'idea generale:

Index.HTML:

<div ng-include ng-controller="JoystickCtrl" src="'same.html'" data-id="1"></div> 
<div ng-include ng-controller="JoystickCtrl" src="'same.html'" data-id="2"></div> 

Controller:

function joystickCtrl($scope, $attrs) { 
     $scope.id = $attrs.id; 
    }; 

Vista:

<h2>Joystick: {{id}}</h2> 

Here is the full code in Plunker.

Problemi correlati