Ajax verilerini Açısal kılavuza getir

Açısal Kılavuz'u kullanarak ajax verilerini console.log dosyasında alırım. Ama boş bir ızgara.Ajax verilerini Açısal kılavuza getir

konsol günlüğü okur:

[13:56:11.411] now!! 
[13:56:11.412] [] 
[13:56:11.412] now!! 
[13:56:11.556] <there is data returned from console.log(getData); >

Bu js dosyasıdır.

// main.js 
var app = angular.module('myApp', ['ngGrid']); 

var getData = []; 

function fetchData() { 
    var mydata = []; 

    $.ajax({ 
     url:'/url/to/hell', 
     type:'GET', 
     success: function(data) { 

      for(i = 0, j = data.length; i < j; i++) { 
       mydata[i] = data[i]; 
      } 
      getData = mydata; 
      console.log(getData); 
     } 
    });  
} 
fetchData();  


app.controller('MyCtrl', function($scope) {  

    console.log('now!!') 
    console.log(getData) 
    console.log('now!!') 

    $scope.myData = getData 


    $scope.gridOptions = { 
     data: 'myData', 
     showGroupPanel: true 
    }; 
});

Yeni Js dosyası:

// main.js

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

app.controller('MyCtrl', function($scope, $http) {   
function fetchData() { 
    $http({ 
     url:'/url/to/hell', 
     type:'GET'}) 
     .success(function(data) { 
      $scope.myData = data;  
      $scope.gridOptions = { 
        data: 'myData', 
        showGroupPanel: true 
       };    
     });   
} 
fetchData();  
});

HTML dosyası.

<html ng-app="myApp"> 
     <head lang="en"> 
      <meta charset="utf-8"> 
      <title>Blank Title 3</title> 
      <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" /> 
      <link rel="stylesheet" type="text/css" href="../static/css/style.css" /> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> 
      <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script> 
      <script type="text/javascript" src="../static/js/main.js"></script> 
     </head> 

     <body ng-controller="MyCtrl"> 

      <div class="gridStyle" ng-grid="gridOptions"></div> 
     </body> 
    </html>

kaynak

2013-02-27 Merlin

Denetleyiciniz, .success tamamlanmadan önce getData dizisine erişiyordur. Değişkene, boş bir diziye ilklendirilmiş bir söz işlevi dışında erişiyorsunuz.

Neden fetchData işlevini denetleyiciye (şimdilik) koymayı ve getData'yi doğrudan .success içinde $ scope.myData dosyasına kaydetmeyi denemiyorsunuz? Belki de ızgarayı orada da başlatabilir misin? İçinde karıştırma konum neden Ayrıca

emin emin değil bunu yapabilir ancak bunu şu şekilde görünecektir eğer varsa:

app.controller('MyCtrl', function($scope, $http) { 
$scope.myData = ''; 
$scope.gridOptions = { showGroupPanel: true, data: 'myData' }; 
function fetchData() { 
    setTimeout(function(){ 
     $http({ 
      url:'/url/to/hell', 
      type:'GET'}) 
      .success(function(data) { 
       $scope.myData = data; 
       if (!$scope.$$phase) { 
        $scope.$apply(); 
       }     
      });   
    }, 3000);  
} 
fetchData();  
});

( https://github.com/angular-ui/ng-grid/issues/39 $ kapsamı bazıları için kaynak şeyler geçerlidir) Açısal kodlu jQuery .ajax ($ http bunu yapar) ve neden javascript'inizde hiç bir noktalı virgül bulunmuyor.

kaynak

2013-02-27 19:50:48

$ http? Nasıl tanımlarım? – Merlin

Üzgünüz, kod snippet'ini güncelledik. Sadece $ kapsamı ile aynı şekilde enjekte edersiniz. $ http çekirdek bir açısal hizmettir. RESTful API'niz varsa, daha fazla soyutlama için $ kaynağını da kullanabilirsiniz. –

Bunu yaptım; "seçenekler tanımsız" bir hata attı – Merlin

İsteğiniz için bir hizmet tanımladıysanız bu çok daha kolay (ve daha açısal) olur. Bu doğrultuda bir şey: set sonra

app.controller('MyCtrl', function($scope, $http, Hell) { 
$scope.myData = Hell.query();

Ve:

var app = angular.module('myApp', ['ngGrid', 'hellServices']);

Sonra denetleyicisi bunun için bir söz alabilirsiniz:

angular.module('hellServices', ['ngResource']) 
    .factory('Hell', function ($resource) { 
    return $resource('URL/TO/HELL', {}, { 
     query: { method: 'GET' } 
    }); 
    });

uygulamanızda dahil etmek emin olun Verileri için vaat edilen verilere bakmak için ızgara seçenekleri (zaten yaptığınız gibi):

$scope.gridOptions = { 
    data: 'myData', 
    showGroupPanel: true 
};

Bunu yaparsanız, $ kapsamı konusunda endişelenmenize gerek yoktur. Bu daha temiz ve takip edilmesi daha kolay. Eğer hala sunucudan yeni döndü kez verileri değiştirmek için bir geri arama gerekiyorsa, hizmetinizin query() işlevine bir işlev geçmesi:

... 
$scope.myData = Hell.query(function(hell) { 
    // code that modifies 'hell' 
});

kontrol dışarı official docs Açısal Hizmetleri. Temel bilgiler, resmi Angular JS öğreticisinin Step #11 numaralı kitabında da ele alınmıştır.

kaynak

2013-03-06 18:13:38 Benmj

Ajax verilerini Açısal kılavuza getir

cevap

İlgili konular