Angular JS - Sending data from a directive to a parent controller

Question

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!

score 4 · Answer 1 · answered Jun 01 '16 at 19:42

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']);

answered Jun 01 '16 at 19:42

AlainIb

4,544
4
38
64

yep, the problem just arise when I modify that bit in the directive – Joe82 Jun 01 '16 at 19:44
Just noticed the plunkr was not working properly, now you can see it working :) – Joe82 Jun 01 '16 at 20:14
The problem was not related with that, the files were loading correctly (see the plunkr) :) – Joe82 Jun 12 '16 at 06:31

score 3 · Answer 2 · answered Jun 10 '16 at 20:55

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);
 };

score 1 · Accepted Answer · answered Jun 09 '16 at 18:36

1

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.

answered Jun 09 '16 at 18:36

dror

83
7

I tried your second option, but I don't seem to be able to access the data (see updated plunkr http://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. – Joe82 Jun 11 '16 at 07:39
Check checkoutdata.html, when I try to access {{ngCart.totalCost()}} it doesn't appear any data in the view – Joe82 Jun 12 '16 at 06:45
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? – dror Jun 12 '16 at 07:00
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). – Joe82 Jun 12 '16 at 07:17

Angular JS - Sending data from a directive to a parent controller

3 Answers3