2015-05-17 21 views
12

Cari tutti Sono nuovo di Angularjs Sto creando un modal con angolare. Uno degli esempi che ho trovato on-line è a seguito della quale non ho difficoltà a capireangolare-UI modale risolvere

$scope.checkout = function (cartObj) { 
    var modalInstance = $modal.open({ 
    templateUrl : 'assets/menu/directives/payment-processing-modal.tmpl.html', 
    controller : ["$scope", "$modalInstance", "cartObj", function($scope, $modalInstance, cartObj) { 
    }], 
    resolve : { // This fires up before controller loads and templates rendered 
    cartObj : function() { 
     return cartObj; 
    } 
    } 
}); 

Quello che mi sono confuso circa è cartObj che ho già ricevuto come parametro per la mia funzione è passato al mio controller attraverso l'iniezione di dipendenza. Tuttavia, perché devo creare una funzione denominata cartObj e restituire quella variabile. Sembra confusionario. Qualcuno può aiutare, per favore ?

risposta

24

Ecco la ripartizione riga per riga:

$scope.checkout = function (cartObj) { 

Una variabile $ scopo è stato creato chiamato checkout, che fa riferimento a una funzione, in modo che si può chiamare nella vista come checkout() (ad esempio da un pulsante con ng-click = "checkout").

Questa funzione è passata a un servizio chiamato cartObj.

var modalInstance = $modal.open({ 

Una variabile chiamata modalInstance viene utilizzata per chiamare il metodo $ modal service open.

L'interfaccia utente del servizio modale Bootstrap $ restituisce un'istanza modale. Il metodo aperto viene passato un oggetto che definisce la configurazione dell'istanza modale come segue:

templateUrl : 'assets/menu/directives/payment-processing-modal.tmpl.html', 

Questo dice che l'istanza modale dovrebbe utilizzare il modello trovato al rispettivo URL.

controller : ["$scope", "$modalInstance", "cartObj", function($scope, $modalInstance, cartObj) { 
    }], 

Questo crea un controller per l'istanza modale che viene passato il $ campo di applicazione, il servizio $ modalInstance e, soprattutto, il servizio cartObj risolto.

I servizi sono single che vengono utilizzati per condividere i dati tra i controllori. Ciò significa che esiste una versione del servizio cartObj e se un controller lo aggiorna, un altro controller può interrogare il servizio e ottenere i dati che sono stati aggiornati da qualsiasi altro controller. È grandioso, ma se una variabile deve essere inizializzata con un certo valore dal servizio quando il controller carica, restituirà undefined perché deve prima chiedere e quindi attendere per recuperare i dati. Ecco dove entra in gioco risolutezza:

resolve : { // This fires up before controller loads and templates rendered 
    cartObj : function() { 
     return cartObj; 
    } 
    } 
}); 

La ragione qui per l'utilizzo di Resolve è probabilmente perché il modello stesso dipende da essere disponibili alcuni dati dal cartObj Quando il modello viene caricato. Risolvi risolverà le promesse PRIMA che il controller carichi, in modo che quando lo fa, i dati sono lì e pronti. Fondamentalmente, la risoluzione semplifica l'inizializzazione del modello all'interno di un controller perché i dati iniziali sono dati al controller invece del controller che deve uscire e recuperare i dati.

Il cartObj risolto è quello che è passato alla modalInstance e può quindi essere letta nel controller come: cartObj. qualche proprietà.

+2

questo è sbagliato: 'Una variabile chiamata modalInstance viene utilizzato per chiamare il servizio di $ modale method.' aperto chiamando il servizio di' modal' $ di 'open()' restituisce l'istanza modale, che viene memorizzato nel 'modalInstance' variabile. – ps2goat

+0

Ho scoperto che funziona solo quando hai definito il controller nella chiamata modal.open piuttosto che nel modello – nuander