JSONP加载到多个anglarjs控制器 [英] load jsonp into multiple anglarjs controllers

问题描述

我有一个JSONP调用返回包含两个对象的对象的服务器。

目前，我做与jQuery的JSONP调用，因为我刚开始学习angularjs，我不知道它是如何做。

我想用 data.filters 在 navController 和 data.results 在 contentController

你会BEB正确的方式与angularjs aceive呢？

 （函数（$，角）{
    $（函数（）{
        $阿贾克斯（{
            JSONP：JSONPCallback
            网址：'myUrl'，
            数据类型：'JSONP'，
            成功：功能（数据）{
               //数据= {过滤器：{...}，结果：{...}}
            }
        }）;
     }）;     VAR应用= angular.module（'应用'，[]）;
     变种控制器= {};     controllers.navController =功能（$范围）{
          $ scope.filters = [{}];
     };      controllers.contentController =功能（$范围）{
          $ scope.results = [{}];
     };     app.controller（控制器）;
}）（jQuery的，角度）;
 

解决方案

喜请看这里的 http://plnkr.co/edit/hYkkQ6WctjhYs8w7I8sT?p=$p$pview

  VAR应用= angular.module（'plunker'，[]）;
app.service（'的DataService'，函数（$ HTTP）{  VAR URL = \"http://public-api.word$p$pss.com/rest/v1/sites/wtmpeachtest.word$p$pss.com/posts?callback=JSON_CALLBACK\";  VAR dataReady = FALSE
  VAR过滤器= [];
  变种结果= [];  函数的getData（）{    如果（dataReady）
    retrun
    其他
    {      $ http.jsonp（URL）
    .success（功能（数据）{        //你的情况
        //angular.copy(data.filters，过滤器）
        //angular.copy(data.results，结果）
        angular.copy（data.posts [0]，结果）;
        angular.copy（data.posts [1]，过滤器）;
        dataReady =真
    }）错误（函数（）{      警报（'斜面加载数据'）;    }）;    }
  }
  返回{
    过滤：过滤器，
    结果：结果，
    的getData：的getData
  }}）
app.controller（'MainCtrl'，函数（$范围的DataService）{
  $ scope.name ='世界';  $ scope.items = dataService.results;  dataService.getData（）;}）;app.controller（'SecondCtrl'，函数（$范围的DataService）{
  $ scope.filters = dataService.filters;  dataService.getData（）;}）;
 

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

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.

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

what would beb the correct way to aceive 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);

解决方案

Hi please see here 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加载到多个anglarjs控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！