6

I have an app where I use the ngCart directive in order to store the items added to a basket. The problem is that this directive just has the functionality of sending the information about the items added by the user, but I would need also to send some information that I would get from a form.

So in order to send it in a single object, I need first to extract the data stored in the directive to my main scope, and then merge it with the data I get from the form.

For that I need to modify the ngCart.js directive. I tried to make a service, as adviced here, but I don't get to get it working. The code I added to the directive is this

.service('ngCartData', ['ngCart', function(ngCart){ return { data:ngCart; }; }])

, but I get an error saying Module 'ngCart' is not available!

I'm totally new to services and factories in angular, so I don't know exactly where to look to make it work. I made a plunkr with my code (I tried modifying the ngCart.js file with the code above, but the plunkr shows the directive without any modification). I just need to be able to send the data stored in the directive in the scope ngCart so that I can listen to it in the parent controller (see the checkout section in the plunkr).

Any help would be much appreciated. Thanks!

Improve this question

3 Answers 3

Reset to default
4

did you load the js file like this :

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

did you load the module in your declaration module like this ? :

var myApp = angular.module('myApp',['ngCart']);
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

yep, the problem just arise when I modify that bit in the directive
Just noticed the plunkr was not working properly, now you can see it working :)
The problem was not related with that, the files were loading correctly (see the plunkr) :)
3

You actually have this backward. You can't inject a directive into a service. You must inject the service into the main controller and into the directive so that you can use it as a bridge between the two. Services are singletons so if you modify the properties of a service those modifications will be available anywhere else it is asked for. Your service will look something like this:

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

then in your controller and directive use the ngCartData api, which would look something like this:

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

Comments

1
+50

You had the right idea in mind, and I'm surprised it didn't work for you.

I have edited your app in the following way (in script.js)

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

and it logged {shipping: 30, taxRate: null, tax: null, items: Array[2]}, which I think is what you need (I added 2 items before it logged).

Notice that adding a the service is redundant; The data is accessible whenever and wherever you need. Just inject ngCart to your controller/service/etc. and the updated data will be available to you.

Therefore, the following code is equivalent:

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

A possible reason for the getting the error you got might be that, while editing the ngCart module, you had some sort of error (like a typo), which led to ngCart being invisible to angular.

Improve this answer

4 Comments

I tried your second option, but I don't seem to be able to access the data (see updated plunkr plnkr.co/edit/EVduknBjgfMouQDKnv2X?p=preview) If it can get it working this way, I will mark it as correct as it doesn't modify the directive code.
Check checkoutdata.html, when I try to access {{ngCart.totalCost()}} it doesn't appear any data in the view
But that's a completely different problem. First solve the current one: can you send http requests with ngCart's data, in addition to your custom data?
Ok, I see your point. Yep, I can access the data like that. I mark it as correct as is the cleaner solution (without affecting the directive).

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.