How to pass object array from one controller to another?

Question

I'm new to angularJS and I have one problem

I have

<div class="item-hover circle effect1" data-ng-repeat="order in Bands">
    <a ng-click="getPerson(order)">
        <div class="spinner"></div>
        <div class="img">
            <img src="http://onthedoor.blob.core.windows.net/photos/{{ order.PosterPicId }}/fullheight.png" alt="img">
        </div>
        <div class="info">
            <div class="info-back">
                <h3>{{ order.BusinessName }}</h3>
                <p>{{ order.Genre1 }}</p>
                <p>Click to know more about this band</p>
            </div>
        </div>
    </a>
</div>

Here I have a huge data in order what I want is when user clicks on the ng-click="getPerson(order)" I want to pass that order to another page which will display more details about that bands EG. tracks, gigs etc.

Here's what my bands controller looks like

'use strict';
app.controller('bandsController', ['$scope', 'bandsService', function ($scope, bandsService) {

    $scope.orders = [];

    bandsService.getBands().then(function (results) {

        $scope.Bands = results.data;
        console.log(results.data)
        $scope.getRandomSpan = function () {
            return Math.round( Math.random() * (19 - 1) + 1);;
        }

    }, function (error) {
        //alert(error.data.message);
    });
    $scope.getPerson = function (band) {
        $scope.$broadcast("band", band);
    };

}]);


function DetailCtrl($scope, $location) {
    $scope.$on("band", function (event, person) {
        $scope.person = person;
    });
}

I've no idea how this could be done I have read some posts but it only appearing the informations about passing the variables but I want to pass that particular object to another controller so I don't have to request again to server and can reduce the Speed.

So, what I need is when user clicks I want to take that object pass it to another page's controller and bind that informations I have no idea about how to redirect and gets that object.

Thanks.

Update

app.factory('myService', ['$http', 'ngAuthSettings', function ($http, ngAuthSettings) {
    var savedData = {}
    function set(data) {
        savedData = data;
    }
    function get() {
        return savedData;
    }

    return {
        set: set,
        get: get
    }

}]);

I'm passing data into myservice here

app.controller('bandsController', ['$scope', 'bandsService', function ($scope, bandsService) {

    $scope.orders = [];

    bandsService.getBands().then(function (results) {

        $scope.Bands = results.data;
        console.log(results.data)
        $scope.getRandomSpan = function () {
            return Math.round( Math.random() * (19 - 1) + 1);;
        }
        myService.set(results.data)
        $scope.doComplete = function () {
            $('.clickBands').click(function () {
                alert('');
            })
        }
        $scope.message="jhi";
        $scope.clickFunction = function () {
            $scope.$broadcast('update_parent_controller', $scope.message);
        };

        //myService.set(yourSharedData);




    }, function (error) {
        //alert(error.data.message);
    });

}]);

Currently its throwing exception like myservice is not defined I don't know what I'm doing wrong. What I want to is to redirect banddetails controller and also to have a data in this my service

Darin Dimitrov · Accepted Answer · 2015-01-01 17:59:46Z

1

One possibility is to have a service which will store the instance of this object:

app.service('myService', function() {
    this.myData = [];

    this.setMyData = function(myData) {
        this.myData = myData;
    };

    this.getMyData = function() {
        return this.myData;
    };
});

Now simply inject the service in both controllers. In the first controller, just before redirecting to the second controller assign the value and in the second controller read the value from the service. Think of the service as a singleton store for your application where you could keep some state in-memory.

answered Jan 1, 2015 at 17:59

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Just code Over a year ago

Thank you. I just can't understand the ` you could keep some state in-memory` can you explain me more how?

Darin Dimitrov Over a year ago

Angular dependency injection will instantiate the service only once (thus singleton) and every time inject this same instance to all your controllers. And since it is a single instance everything you store in this object will remain in-memory for the entire lifetime of your application.

Just code Over a year ago

thanks for your detailed information I'm really new to angular and can't understand what you're trying to say I will read some tutorial and will get back to you if you don't mine. Thanks

Just code Over a year ago

Thank you very much after two days learning tutorials I'm getting the whole flow and getting results cheers. :)

greenfox · Accepted Answer · 2015-01-01 19:05:29Z

1

If you just want a simply and bullet response:

1) You can inject $rootScope module and store in that your variables, you can use a MainController in your body too.

2) Just use an $emit that sends data, and use $on to retrieve data.

However if you need to pass arrays from one controller to another try to think out how to architect better your code, $emit is not very appreciable since it uses $watch (very heavy module) on its source.

I just don't like to use services to store simple data, as per a better architecture services must only abstract API calls (or even mock objs)

answered Jan 1, 2015 at 19:05

greenfox

1981 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to pass object array from one controller to another?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related