AngularJS - access elements in scope

Question

I have done a service that gets a json file from the server with the translated values of the labels of my webapp. Seems to work fine:

mobilityApp.service('serveiTraduccions', function($resource) {

    this.getTranslation = function($scope) {
        var languageFilePath = 'traduccions/traduccio_en.json';
        $resource(languageFilePath).get(function (data) {                        
            $scope.translation = data;
        });
    };

});

What I am trying to do is acces that "$scope.translation" from my controler, I tried all and nothing worked. The object is saved in my $scope as you can see:

enter image description here

how can I get the values of the "registroBtnRegistro", "registroErrorRegistro" etc ?

Thanks in advance !

I tried:

console.log($scope.translation); -> undefined
console.log($scope['translation']); -> undefined
console.log($scope.translation.registroBtnRegistro); -> TypeError: Cannot read property 'registroBtnRegistro' of undefined console.log($scope.translation['registroBtnRegistro']); -> TypeError: Cannot read property 'registroBtnRegistro' of undefined

can you add the attempts to the question? maybe you're trying to access them before the promise is resolved? what's the markup like? — Eduard Gamonal
– Eduard Gamonal, Commented May 5, 2014 at 10:51

Alexandre TRINDADE · Accepted Answer · 2014-05-05 10:51:56Z

1

Maybe you're trying to access these values from another $scope that not inherits the scope where you've created your translation model.

Try to assign this model directly to $rootScope, so you can access it from every scope:

mobilityApp.service('serveiTraduccions', function($resource, $rootScope) {

    this.getTranslation = function() {
        var languageFilePath = 'traduccions/traduccio_en.json';
        $resource(languageFilePath).get(function (data) {                        
            $rootScope.translation = data;
        });
    };

});

answered May 5, 2014 at 10:51

Alexandre TRINDADE

95710 silver badges22 bronze badges

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

6 Comments

Albert Prats Over a year ago

keeps doing the same, it outputs undefined

Alexandre TRINDADE Over a year ago

How are you trying to show these values in your html? I saw that your translation object is a promise, and not your data returned by your server.

Albert Prats Over a year ago

ok, trying to output the values in my HTML like this works {{translation.registroPlaceholderRegistro}} I tried to do the console.log to check that the values were right, but if i can output it at the HTML is fine, thanks !!

Alexandre TRINDADE Over a year ago

This is because $resource.get function is an asynchronous function, and you tried to call console.log BEFORE your resouce.get has returned. Try to call console.log like that: $timeout(function(){console.log($scope.translation.registroPlaceholderRegistro);}, 0); And don't forget to inject $timeout in your controller.

Eduard Gamonal Over a year ago

$timeout might be alright for quick debugging but it's a nasty solution for real code, which should use promises properly

|

Community · Accepted Answer · 2017-05-23 12:20:49Z

this answer is a blind attempt because your original post lacks basic information like the call from the controller. we can refine it until we make it work.

First, you should be returning something from your method:

mobilityApp.service('serveiTraduccions', function($resource) {
  this.getTranslation = function() {
    var languageFilePath = 'traduccions/traduccio_en.json';
    return $resource(languageFilePath);
  };
});

You are using $resource but you might as well use basic $http.get(). at least it doesn't look like a restful api to me. In any case, because it's an asynchronous request, it will not return the list of translated strings, but a resource "class" that allows methods like get, delete or the more general query():

from the docs: default methods are { 'get': {method:'GET'}, 'save': {method:'POST'}, 'query': {method:'GET', isArray:true}, 'remove': {method:'DELETE'}, 'delete': {method:'DELETE'} };

sidenote: injecting $scope in a service doesn't make much sense to me: services are used to encapsulate common logic accross components. However, you can pass a scope instance as a parameter.

Then, the controller that uses this should have the service injected and use a callback to get the results when they have arrived (asynchronous operation!):

TraduccioCtrl ... {
     $scope.translation = {}; // avoid undefined when the view just loads

     ServeiTraduccions.getTranslation.query(function (response) { 
        $scope.translation = response; // and angular's two-way data binding will probably do the rest
     });

}

The Angular docs about ng-resource have a working example. Other questions in SO have addressed this already too, like Using AngularJS $resource to get data

Collectives™ on Stack Overflow

AngularJS - access elements in scope

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related