Angular JS - Invio di dati da una direttiva a un controllore genitore

Question

Ho un'app in cui utilizzo la direttiva ngCart per archiviare gli articoli aggiunti a un carrello. Il problema è che questa direttiva ha solo la funzionalità di inviare le informazioni sugli elementi aggiunti dall'utente, ma avrei anche bisogno di inviare alcune informazioni che otterrei da un modulo.

Quindi, per inviarlo in un singolo oggetto, è necessario prima estrarre i dati memorizzati nella direttiva nel mio ambito principale e quindi unirli ai dati che ottengo dal modulo.

Per questo ho bisogno di modificare la direttiva ngCart.js. Ho provato a creare un servizio, come consigliato here, ma non riesco a farlo funzionare. Il codice ho aggiunto alla direttiva è questo

.service('ngCartData', ['ngCart', function(ngCart){ 

    return { 
     data:ngCart; 
    }; 

}]) 

, ma ottengo un errore che dice Module 'ngCart' is not available!

Sono totalmente nuovo per i servizi e le fabbriche in angolare, quindi non so esattamente dove cercare per farlo funzionare. Ho creato un codice plunkr con il mio codice (ho provato a modificare il file ngCart.js con il codice sopra, ma il plunkr mostra la direttiva senza alcuna modifica). Devo solo essere in grado di inviare i dati memorizzati nella direttiva nello scope ngCart in modo che io possa ascoltarlo nel controller genitore (vedere la sezione checkout nel plunkr).

Qualsiasi aiuto sarebbe molto apprezzato. Grazie!

Answer 1

Hai avuto l'idea giusta in mente, e sono sorpreso che non ha funzionato per te.

Ho modificato la vostra applicazione nel modo seguente (in script.js)

app.controller('myCtrl', function($scope, ngCart, myCart) { 
    $scope.names = [...]; 
    ... 
    console.log(myCart.cart); 
}) 
    .factory('myCart',function(ngCart){ 
     return { 
      cart: ngCart.$cart 
     }; 
}) 

e loggato {shipping: 30, taxRate: null, tax: null, items: Array[2]}, che credo sia quello che vi serve (ho aggiunto 2 punti precedenti registrato).

Si noti che l'aggiunta di un servizio è ridondante; I dati sono accessibili quando e dove necessario. Basta iniettare ngCart al controller/servizio/ecc. e i dati aggiornati saranno disponibili per te.

Pertanto, il seguente codice è equivalente:

app.controller('myCtrl', function($scope, ngCart) { 
     $scope.names = [...]; 
     ... 
     console.log(ngCart.$cart); 
    }); 

Una possibile ragione per il ottenere l'errore che hai potrebbe essere che, durante la modifica del modulo ngCart, si aveva una sorta di errore (come un errore di battitura) , che ha portato a ngCart essere invisibile a angolare.

Answer 2

state caricate il file js in questo modo:

<script src="pathto/angular/angular.js"></script> 
<script src="pathto/ngCart.js"></script> or ngCart.min.js 

ha si carica il modulo nel modulo di dichiarazione di come questo? :

Answer 3

In realtà questo è indietro. Non è possibile iniettare una direttiva in un servizio. È necessario inserire il servizio nel controller principale e nella direttiva in modo da poterlo utilizzare come ponte tra i due. I servizi sono singleton, quindi se modifichi le proprietà di un servizio quelle modifiche saranno disponibili in qualsiasi altro posto richiesto. Il vostro servizio sarà simile a questo:

.service('ngCartData', [function(){ 

return { 
    data:[], 
    addData: function(newData){ 
     this.data.push(newData); 
    }, 
    getData: function(){ 
     return this.data; 
    } 
}; 

}]) 

poi nel vostro controller e direttiva utilizzare l'API ngCartData, che sarebbe simile a questa:

$scope.someData = ngCartData.getData(); 
$scope.someFunction = function(dataToStore){ 
    ngCartData.addData(dataToStore); 
};