CODEWITHSUNDEEP
javascriptangularjs
Dennis
Dennis

Reputation: 368

Show data from object somewhere else

So I'm using currently angular in my project, but I have trouble adding dynamic content.

So I have created a list with ng-repeat and when I click on it I get the all the information from that specefic item that I clicked on and add it to a fresh scope item. 

        $scope.click = function() {
            $scope.personData = this.person;
        };

And now I want to print the {{ personData.name }} on a specefic place, it works fine in the element but when I wanna use it somewhere else outside the element (for example in another page in the NG-view) where I linked the exact same controller to it where in my thoughs I have acces to the same data it doesn't update on my page.

there it is

app.controller('showDataController', function(jsonData, $scope, infoService) {
    jsonData.async().then(function(response) {

        $scope.data = response;

        $scope.click = function() {
            infoService.setPersonData(this.person);
        };

    });
});

app.service('infoService', function() {
    var people = {};
    function setPersonData(person) {
        people[person.name] = person; // assuming person is an object
        return people;
    }

});

Upvotes: 0

Views: 42

Answers (1)

br3w5
br3w5

Reputation: 4593

That's because on each view/state reload the controllers get reloaded so there is no reference to that scope. $scope refers to the current controller. To pass objects around your application create a service or factory that can store and retrieve that information with get and set methods. Then your controller code for adding an item can be:

$scope.click = function() {
    myService.setPersonData(this.person);
};

And for retrieving it:

$scope.personData = myService.getPersonData(this.person.name); // a reference to that person is needed

Your service set and get methods could look something like:

var people = {};

function setPersonData(person) {
    people[person.name] = person; // assuming person is an object
    return people;
}

function getPersonData(name) {
    return people[personName];
}

Update

Based on updated code in the question try this:

app
.service('infoService', infoService)
.controller('showDataController', showDataController);

showDataController.$inject = ['jsonData', '$scope', 'infoService']; // this makes your code minification safe

function infoService() {
    var people = {};

    // returns an object with references to the methods defined in the service - aka the Revealing Module Pattern
    return {
        setPersonData: setPersonData
        //getPersonData: getPersonData (comment out once this method is declared below) 
    };

    function setPersonData(person) {
        people[person.name] = person; // assuming person is an object
        return people;
    }

});

function showDataController(jsonData, $scope, infoService) {
    jsonData.async().then(function(response) {

        $scope.data = response;

        $scope.click = function() {
            infoService.setPersonData(this.person);
        };

    });
});

NB: usually I would put different components of an application in different files. A good styleguide to follow is https://github.com/johnpapa/angular-styleguide but there are others like https://github.com/toddmotto/angularjs-styleguide

Upvotes: 2

Related Questions