current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

I am loading JSON file from S3. File is loading successfully but problem is, I cannot access AnglarJS modules($scope, services and etc) in my callback function because it is written outside angularJS. Is there a way to access $scope in my callback?

AngularJS code

var url = "http://my_s3_url/abc/v1/klm/my.json"

$http.jsonp(url);

my.json

jsonp_callback({name:"xyz",age:2})

callback

<script>
   function jsonp_callback(data) {
      console.log(data.name);
      // cannot access $scope here :(
   }
</script>
share|improve this question
add comment

5 Answers

up vote 2 down vote accepted
+50

Hmm you are using $httpso I guess angular is generally available. Got a bit irritated because you said because it is written outside angularJS

Is there a way to access $scope in my callback?
If your script block is within the same document, then you can access any scope by doing angular.element('body').scope() for example.

<script>
  function jsonp_callback(data) {
    console.log(data.name);

    // access $scope here :)
    var scope = angular.element('body').scope();
    scope.$apply(function() {
      scope.lastResult = data;
    });
  }
</script>

body is just an example, you know which element your scope is on better than we do ;)

share|improve this answer
 
Found another solution :). stackoverflow.com/a/13400409/649388 –  waqas Dec 20 '13 at 18:54
 
nice - glad u found it useful. ty and merry Xmas :) –  angabriel Dec 21 '13 at 2:34
add comment
up vote 0 down vote

You shouldn't have to write the callback function yourself. It should be enough to use the special "success" method from the resulting promise from the $http.jsonp call. If the following code is in the controller, you should still have access to the $scope variable.

$http.jsonp(url).
success(function(data, status, headers, config) {
    // The data is here
}).

Edit I've realised this answer depends on there being a string JSON_CALLBACK in the url passed to $http.jsonp, which I suspect Angular replaces with some unique callback function it's defined. The server must then interpret this, and output JSON wrapped in a call to this function. This might not work on S3, which just serves static files.

share|improve this answer
 
Thnx Michal, yes you are right that this solution won't in case of S3. Any idea how we can make it work? –  waqas Dec 16 '13 at 7:17
1  
How about CORS? docs.aws.amazon.com/AmazonS3/latest/dev/cors.html . Then you can just store standard JSON. IE support isn't great though caniuse.com/cors –  Michal Charemza Dec 16 '13 at 8:15
 
yes I know CORS is an option. But this is our last option. If we become unable to find any solution then we have to enable CORS at the end to make things work. –  waqas Dec 16 '13 at 10:06
add comment
up vote 0 down vote

Use the $q promise library to pass the data back to the scope

In the director.js

function eventReturn($http, $q){   
   return {
      getEvent: function(){
          var deferred = $q.defer();
          $http({method:'GET', url'http://my_s3_url/abc/v1/klm/my.json'}).
              success(function(data, status, headers, config){
                  deferred.resolve(data);
          });
          return deferred.promise;
      }
   }
};

and in the controller.js

$scope.event = eventReturn.getEvent();
share|improve this answer
 
we cannot send $http({method:'GET' ... }) request to S3. We have to stick with $http({method:'JSONP' ...}). If we want to send 'GET' request to S3, we have to enable Cross(CORS) Domain request on Amazon S3 otherwise it won't work. –  waqas Dec 20 '13 at 18:07
add comment
up vote 0 down vote

I have created the plunker for your scenario, its like when page loads it will read the json file from $http and then call the external js file function,to that function it will pass the $scope and result data, that external function take the result and display by using scope.

url : http://plnkr.co/edit/k66KevvcIyxiKA5QSBAc?p=preview

hope this is what ur looking.

share|improve this answer
 
we cannot send $http({method:'GET' ... }) request to S3. We have to stick with $http({method:'JSONP' ...}). If we want to send 'GET' request to S3, we have to enable Cross(CORS) Domain request on Amazon S3 otherwise it won't work –  waqas Dec 20 '13 at 18:11
 
modified the plucker to 'JSONP' instead of GET plnkr.co/edit/k66KevvcIyxiKA5QSBAc?p=preview. could you please elaborate your issue. –  Uttesh Kumar Dec 21 '13 at 3:41
add comment
up vote 0 down vote

I use the AWS javascript lib and had to use apply:

AWS.config.update({accessKeyId: '?', secretAccessKey: '?'});
var s3 = new AWS.S3({ maxRetries: 5});
console.log("S3 correctly configured");
s3.listObjects( {Bucket : 'bucketName', Prefix : 'foo/bar/' }, function (err, data) {
    if (err) {
        console.log(err); // an error occurred
    } else {
        console.log(data); // successful response
        sc.$apply(function() {
            sc.prefix = data.Prefix;
            sc.data = data;
        });
    }
});
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.