将jsonp加载到多个AngularJS控制器中 [英] load jsonp into multiple AngularJS controllers

问题描述

我对服务器进行jsonp调用，该服务器返回一个包含两个对象的对象.

I have a jsonp call to a server which returns an object containing two objects.

此刻，我使用jQuery进行jsonp调用，因为我刚刚开始学习AngularJS，但我不知道它是如何完成的.

At the moment I make the jsonp call with jQuery because I've just started learning AngularJS and I dont know how it's done.

我想在navController中使用data.filters在contentController中使用data.results

I want to use data.filters in navController and data.results in contentController

用AngularJS实现此目标的正确方法是什么?

What would be the correct way to achieve this with AngularJS ?

(function($, angular) {
    $(function() {
        $.ajax({
            jsonp: "JSONPCallback",
            url: 'myUrl',
            dataType: 'jsonp',
            success: function(data) {
               //data =  {"filters":{...},"results":{...}}
            }
        });
     });

     var app = angular.module('app', []);
     var controllers = {};

     controllers.navController = function($scope) {
          $scope.filters = [{}];
     };

      controllers.contentController = function($scope) {
          $scope.results = [{}];
     };

     app.controller(controllers);

})(jQuery, angular);

推荐答案

请在这里查看 http: //plnkr.co/edit/hYkkQ6WctjhYs8w7I8sT?p=preview

var app = angular.module('plunker', []);


app.service('dataService', function($http){

  var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK";

  var dataReady= false
  var filters = [];
  var results = [];

  function getData() {

    if (dataReady)
    retrun
    else
    {

      $http.jsonp(url)
    .success(function(data){

        //in your case 
        //angular.copy(data.filters, filters)
        //angular.copy(data.results , results )
        angular.copy(data.posts[0], results);
        angular.copy(data.posts[1], filters);
        dataReady = true
    }).error(function(){

      alert('cant load data');

    });

    }


  }


  return {
    filters : filters,
    results : results,
    getData : getData
  }

})
app.controller('MainCtrl', function($scope,dataService) {
  $scope.name = 'World';

  $scope.items = dataService.results;

  dataService.getData();

});

app.controller('SecondCtrl', function($scope,dataService) {


  $scope.filters = dataService.filters;

  dataService.getData();

});

这篇关于将jsonp加载到多个AngularJS控制器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！