AngularJS parziale cambiamento di controllo sullo scatto

Question

Sto lavorando su un'applicazione dashboard in cui si dispone di una serie di moduli che viene mostrato allo stesso tempo. Mi piacerebbe aggiungere più "viste" a questi moduli. Ad esempio, la prima vista di un modulo Github è una lista dei tuoi repository. Quando fai clic sul link di un repository in quel modulo, quella vista nel modulo verrebbe sostituita con una nuova schermata che mostra tutte le informazioni dettagliate su quel repository.

Tuttavia, voglio questa vista per essere isolato in questo modulo in modo da poter continuare a utilizzare i miei altri moduli allo stesso tempo (non voglio che per cambiare pagina a tutti).

Un esempio di quello che sto cercando di realizzare può essere trovato qui: http://jsfiddle.net/5LgCZ/

In questo esempio, è necessario fare clic un frutto o una macchina e ottenere informazioni dettagliate su tale voce in quel modulo in una nuova vista . (attualmente esegue solo un avviso).

Questo è quello che ho finora, ma non ho idea di come strutturare e avvicinarsi a questo per quanto riguarda i controller e le viste andare:

<div ng-app="app"> 
    <div class="module" ng-controller="FruitCtrl"> 
     <h1>Fruit Module</h1> 
     <ul> 
      <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li> 
     </ul> 
    </div> 
    <div class="module" ng-controller="CarCtrl"> 
     <h1>Car Module</h1> 
     <ul> 
      <li ng-repeat="car in cars"><a href="#" ng-click="showDetail(car)">{{car}}</a></li> 
     </ul> 
    </div> 
</div> 

Grazie in anticipo per chi sarà in grado di aiutare.

Answer 1

Non sono del tutto sicuro di cosa intendi con uno new view e ci sono probabilmente alcuni modi per farlo, ma solo per iniziare con uno dei più facili (secondo me), puoi avere un elemento di dettagli per ogni modulo che si mostra/Nascondi sulla base di una selezione:

<div class="module" ng-controller="FruitCtrl"> 
    <h1>Fruit Module</h1> 
    <ul ng-show='!fruitSelected'> 
     <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li> 
    </ul> 
    <div class="details" ng-show="fruitSelected">{{fruitSelected}}</div> 
</div> 

function FruitCtrl($scope) { 
    $scope.fruits = ['Banana', 'Orange', 'Apple']; 
    $scope.fruitSelected = false; 
    $scope.showDetail = function (fruit) { 
     $scope.fruitSelected = fruit; 
    } 
} 

Answer 2

Se wan't un paio di stati da visualizzare all'interno dello stesso elemento HTML, è possibile sfruttare il built-in ng-switch direttiva. Ciò ti consentirà di cambiare il contenuto dell'elemento mantenendo allo stesso tempo lo stesso $scope in modo da poter condividere facilmente i dati tra questi stati.

Ecco il vostro violino aggiornamento: http://jsfiddle.net/dVFeN/ e al di sotto va la spiegazione.

In caso di vostro esempio, potrebbe assomigliare a questo:

HTML

<div class="module" ng-controller="FruitCtrl"> 
    <h1>Fruit Module</h1> 
    <div ng-switch="moduleState"> 
     <div ng-switch-when="list"> 
      <ul> 
       <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li> 
      </ul> 
     </div> 
     <div ng-switch-when="details"> 
      <p>Details for {{ selectedFruit }}</p> 
      <a href="#" ng-click="showList()">Back to list</a> 
     </div> 
    </div> 
</div> 

La variabile più chiamato moduleState definisce lo stato corrente del widget. Grazie alla direttiva ng-switch il contenuto del esterno div passa automaticamente da elementi interni in base ai valori passati ai loro ng-switch-when attributi.

JS

function FruitCtrl($scope) 
{ 
    $scope.moduleState = 'list'; 

    $scope.fruits = ['Banana', 'Orange', 'Apple']; 

    $scope.showDetail = function(fruit) 
    { 
     $scope.selectedFruit = fruit; 

     $scope.moduleState = 'details'; 
    }; 

    $scope.showList = function() 
    { 
     $scope.moduleState = 'list'; 
    }; 
} 

Tutto quello che dovete fare è quello di modificare il valore della variabile moduleState, che mostra automaticamente la vista widget desiderato. Inoltre, la variabile selectedFruit introdotta mantiene il riferimento dell'elemento su cui agire nella visualizzazione dettagli.

Il vantaggio di utilizzare la direttiva ng-switch è che si può facilmente aggiungere qualsiasi numero di stati per il tuo widget in modo coerente.

è possibile modificare il secondo modulo di conseguenza.