Angular JS - Przesyłanie danych z dyrektywy do kontrolera nadrzędnego

Question

Mam aplikację, w której używam dyrektywy ngCart w celu przechowywania produktów dodanych do koszyka. Problem polega na tym, że ta dyrektywa ma jedynie funkcję wysyłania informacji o przedmiotach dodanych przez użytkownika, ale potrzebowałabym również wysłać pewne informacje, które dostałbym z formularza.

Aby wysłać go do pojedynczego obiektu, najpierw muszę wyodrębnić dane zapisane w dyrektywie do mojego głównego zakresu, a następnie połączyć je z danymi, które otrzymuję z formularza.

W tym celu należy zmodyfikować dyrektywę ngCart.js. Próbowałem wykonać usługę, zgodnie z zaleceniami here, ale nie udało mi się jej uruchomić. Kod dodałem do tej dyrektywy jest to

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

    return { 
     data:ngCart; 
    }; 

}]) 

, ale pojawia się błąd mówiący Module 'ngCart' is not available!

Jestem zupełnie nowy w serwisie i fabryk w kanciasty, więc nie wiem dokładnie, gdzie szukać aby to działało. Zrobiłem plunkr z moim kodem (próbowałem zmodyfikować plik ngCart.js powyższym kodem, ale plunkr pokazuje dyrektywę bez żadnych modyfikacji). Po prostu muszę mieć możliwość przesłania danych zapisanych w dyrektywie w zakresie ngCart, aby móc go odsłuchać w kontrolerze nadrzędnym (patrz sekcja kasy w plunkr).

Każda pomoc będzie mile widziana. Dzięki!

Answer 1

Miałeś właściwy pomysł i jestem zaskoczony, że to nie działa.

Mam edytowany swoją aplikację w następujący sposób (w script.js)

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

i zalogowany {shipping: 30, taxRate: null, tax: null, items: Array[2]}, co moim zdaniem jest to, czego potrzebujesz (dodałam 2 pozycji zanim zalogowany).

Należy zauważyć, że dodanie usługi jest zbędne; Dane są dostępne zawsze i wszędzie tam, gdzie są potrzebne. Po prostu wstrzyknij ngCart do kontrolera/usługi/etc. a zaktualizowane dane będą dostępne.

Dlatego następujący kod jest równoważne:

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

Możliwym powodem dla uzyskiwanie błąd co masz może być tak, że podczas edycji modułu ngCart, miałeś jakiś błąd (jak literówki) , co doprowadziło do tego, że ngCart jest niewidoczny dla kątowego.

Answer 2

pan załadować pliku js tak:

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

czy załadować moduł w module deklaracji jak to? :

var myApp = angular.module('myApp',['ngCart']); 

Answer 3

Rzeczywiście masz to do tyłu. Nie możesz wprowadzić dyrektywy do usługi. Musisz wprowadzić usługę do głównego kontrolera i do dyrektywy, abyś mógł użyć go jako pomostu między tymi dwoma. Usługi są pojedyncze, więc jeśli modyfikujesz właściwości usługi, te modyfikacje będą dostępne gdziekolwiek indziej, o które się proszą. Usługa będzie wyglądać mniej więcej tak:

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

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

}]) 

wówczas w kontrolerze i dyrektywa użyć API ngCartData, który będzie wyglądać następująco:

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