JSONPコールバック関数から角型コントローラにデータを渡す

角型コントローラ外でコールバックが機能するJSONP要求があります。どのようにしてその関数からコントローラにデータを戻すことができますか？または、コントローラ内でコールバック関数を使用する方法がありますか？JSONPコールバック関数から角型コントローラにデータを渡す

「？callback = JSON_CALLBACK」を追加しないでください成功約束します。 JSONPレスポンスが関数呼び出しでラップされているためだと思います。 CBR_XML_Daily_Ru（{"Date"： "2016-10-06T00：00：00 + 00：00" ...}）;

<div ng-controller='myCtrl' ng-app='myApp'> 
    <input type=text ng-model='divForCharCode'></input> 
    <div id='div1'></div> 
</div> 

<script>CBR_XML_Daily_Ru = function(data) { 
    document.getElementById("div1").innerHTML = data.Valute.EUR.CharCode; 

}; 

var myApp = angular.module('myApp', []) 
    .controller('myCtrl', myCtrl); 

    function myCtrl($scope,$http) { 
     $scope.divForCharCode = ' need to place EUR here!'; 
    $http.jsonp('https://www.cbr-xml-daily.ru/daily_jsonp.js'); 
    };</script>

https://plnkr.co/edit/hKdXf7MxAhnU8aMFqPUV

出典

2016-10-06 Anton

私はあなたがここを見なければならないと思う[類似の場合質問]（http://stackoverflow.com/questions/12066002/parsing-jsonp-http-jsonp-response-in-angular-js） –

を助け希望は私は、このソリューションは、（angular.element（）にいる間、ここで私たちは、角度サービス$windowを使用しているためangular.element(....).scope()を使用他のソリューションよりも優れている、あなたの場合には、検索し、試した後、この解決策を思いつきました.scope）は、いくつかの角度モード、check thisで無効にすることができます。

CBR_XML_Daily_Ru = function(data) { 
    angular.element("#controllerDivId").controller().angularJsonpCallBackDefindInController(data); 

}; 

var myApp = angular.module('myApp', []).controller('myCtrl', myCtrl); 

function myCtrl($scope, $http,$window) { 
    var self = this; 

    $http.jsonp('https://www.cbr-xml-daily.ru/daily_jsonp.js?callback=JSON_CALLBACK'); 
    self.angularJsonpCallBackDefindInController = function (data) { 
    self.divForCharCode = data.Valute.EUR.CharCode; 
    }; 
}

これはHTML（あなたが第二の溶液を使用するためにjqueryのを含める必要がある）

です：あなたもjqueryの「スコープ」からコントローラ内の関数を実行するためのこの方法を使用することができます

CBR_XML_Daily_Ru = function(data) { 
    window.angularJsonpCallBackDefindInController(data); 

}; 

var myApp = angular.module('myApp', []).controller('myCtrl', myCtrl); 

function myCtrl($scope, $http,$window) { 
    var self = this; 

    $http.jsonp('https://www.cbr-xml-daily.ru/daily_jsonp.js?callback=JSON_CALLBACK'); 
    $window.angularJsonpCallBackDefindInController = function (data) { 
     //u can do anything here, you are in the controller, and in the same time this function in the window object and get called from anywhere even in jquery 
    self.divForCharCode = data.Valute.EUR.CharCode; 
    }; 
}

<html> 

<head> 
    <script src="jquery-3.1.1.min.js"></script> 
    <script src="angular.min.js"></script> 
    <!--<link rel="stylesheet" href="style.css" />--> 
    <script src="jsnopstuff.js"></script> 
</head> 

<body> 
    <div id="controllerDivId" ng-controller='myCtrl as ctrl' ng-app='myApp'> 
     <input type=text ng-model='ctrl.divForCharCode'> 
     <div id='div1'></div> 
    </div> 

</body> 
</html>

出典

2016-10-06 13:09:21

ありがとう、それは動作します！私はまだサーバーがJSONPデータ形式に応答したと疑っていますが、Angular ... – Anton

歓迎ですが、角度コールバック名https://github.com/angular/angularを受け入れる多くのJSONPサーバーの問題についてこの行をチェックしてください。 js/issues/1551 –

-1

私はこのように行われています：このコードは$ qを使用して完全に機能する約束をしています。これは

 <div ng-controller='myCtrl' ng-app='myApp'> 
     <input type=text ng-model='divForCharCode'></input> 
     <div>{{data.Valute.EUR.CharCode}}</div> 
    </div> 

    <script> 

     var myApp = angular.module('myApp', []) 
      .controller('myCtrl', myCtrl); 

      function myCtrl($scope,$http, $q) { 
       var self = this; 
       self.divForCharCode = ' need to place EUR here!'; 

       var getDataFromServer = function(){ 
       var deferred = $q.defer(); // creating a promise 
       var url = "https://www.cbr-xml-daily.ru/daily_jsonp.js?callback=JSON_CALLBACK"; 
       $http.get(url).success(function (data, status, headers,config) { 
       deferred.resolve(data); 
      }).error(function (data, status, headers, config) { 
       //this always gets called 
       console.log(status); 
       deferred.reject(status); 
      }); 
      return deferred.promise; 
      } 
      var promise = getDataFromServer(); 
      promise.then(function(data){ 
      $scope.data = data; 
      }); 

      }; 
</script>

出典

2016-10-06 08:49:41

エラーを取得：バツMLHttpRequestはhttps://www.cbr-xml-daily.ru/daily_jsonp.js?callback=JSON_CALLBACKを読み込めません。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。 Origin 'http://127.0.0.1:8000'はアクセスできません。 – Anton

@Antonこれはローカルにホストされているサーバーからリソース（ここではjsonp.jsファイル）にアクセスしようとしているために起こっています。アクセスしようとしているサーバーがCORSを許可していません。これは、通常、Webアプリケーションがローカルインスタンスから実行されている場合に発生します。 –

リモートサーバーが正しく構成されていないか、リクエストが間違っていますか？私はcbr-xml-daily.ruを支配しておらず、私のローカルネットワークにもありません。 – Anton

JSONPコールバック関数から角型コントローラにデータを渡す

答えて

関連する問題