एक कोणीय स्कोप वैरिएबल

Question

केंडो डेटासेट को दें, मैं वर्तमान में रिमोट डेटा के साथ एक केंडो ग्रिड भरने की कोशिश कर रहा हूं। केंडो का डेटा लाने के लिए अपना स्वयं का कार्य है, लेकिन मैं जो कोणीय फैक्ट्री बनाया है उसका उपयोग करना चाहता हूं।

तो मैं एक कारखाने, एक समारोह "getSkills" है जो की है। यह कार्य मेरे एपीआई से सभी कौशल वस्तुओं को प्राप्त करता है।

angular.module('MyApp').factory('Factory', function ($resource) { 
    return $resource('/api/v1/skills/', { }, 
     { 
      getSkills: { method: 'GET', isArray: true } 
     }); 
});  

कोणीय में मेरे स्किलकंट्रोलर में, मैंने इन fetched कौशल को एक स्कोप चर में रखा।

$scope.gridOptions = { 
       dataSource: { 
        data: $scope.skills, 
        schema: { 
         model: { 
          fields: { 
           ID: { type: "number" }, 
           Name: { type: "string" }, 
           CreatedBy: { type: "number" }, 
           CreatedDate: { type: "string" }, 
           EditedBy: { type: "number" }, 
           EditedDate: { type: "string" }, 
           InUse: { type: "boolean" } 
          } 
         } 
        }, 
        pageSize: 20 
       }, 
       scrollable: true, 
       sortable: true, 
       filterable: true, 
       pageable: { 
        input: true, 
        numeric: false 
       }, 
       selectable: true, 
       columns: [ 
        { field: "Name", title: "skillname", width: "130px" } 
       ] 
      }; 

अधिकांश समय, ajax कॉलबैक केन्डो ग्रिड के प्रारंभ की तुलना में धीमी:

$scope.skills = SkillFactory.getSkills(); 

मैं केंडो ग्रिड यहां आरंभ कर देगा। फिर यह एक खाली तालिका दिखाएगा, क्योंकि तालिका का डेटा कोणीय $ scope.skills चर से बंधे नहीं है।

मैं हर जगह खोज की है, लेकिन मैं समझ नहीं कैसे मैं प्रारंभ में डेटा विशेषता के लिए एक कस्टम समारोह का उपयोग कर सकते हैं, या कैसे मेज पर गुंजाइश चर बाध्य करने के लिए।

किसी भी मदद की सराहना की जाएगी!

Answer 1

मुझे थोड़ा आसान समाधान मिला: मेरे मामले में $ scope.regs "AppService" के संपर्क में अंगुलर $ संसाधन का उपयोग कर सर्वर REST सेवा से अद्यतन डेटा को परिभाषित करता है। "डेटा का उपयोग कर

<div id="form-item"> 
<label for="appId" class="info">AppId:</label> 
<input id="appId" ng-model="searchAppId"> 
<button id="search" class="k-button" ng-click="doSearch()" >Search</button> 
</div> 

<div kendo-grid k-data-source="registrations" k-selectable="'row'" 
    k-pageable='{ "refresh": true, "pageSizes": true }' 
    k-columns="registrationsColumns" 
    k-sortable="true" k-groupable="true" k-filterable="true" 
    k-on-change="selectedItem = data" 
    k-auto-bind="false" > 
</div> 

के बजाय बाध्यकारी केंडो ग्रिड डेटा स्रोत:

var registrationServices = angular.module('registrationServices', ['ngResource']); 

    registrationServices.factory('AppService', ['$resource', 
     function($resource) { 
      return $resource('rest/registrations'); 
    }]); 

1. मैं k-ऑटो बाँध = ग्रिड परिभाषा" गलत "एचटीएमएल में सेट: इस सेवा के रूप में परिभाषित किया गया है ऐसा ही कुछ पढ़ "समारोह के रूप में परिभाषित किया गया," के साथ "परिवहन" संपत्ति, मैं प्रयोग किया जाता है ": फिर

   $scope.regs; 
   
   $scope.registrations = new kendo.data.DataSource({ 
       transport: { 
        read: function(options) { 
         options.success($scope.regs); 
        } 
       }, 
       schema: { 
        model: { 
         fields: { 
          registrationId: {type: "number"}, 
          clientFullName: {type: "string"}, 
          registrationDate2: {type: "number"}, 
          registrationDate: {type: "date"} 
         } 
        } 
       }, 
       pageSize: 5, 
       serverPaging: true, 
       serverFiltering: true, 
       serverSorting: true 
   }); 
   
   
   $scope.registrationsColumns = [{"field": "registrationId", "title": "Id"}, 
       {"field": "clientFullName", "title": "Name"}, 
       {"field": "registrationDate", 
        "title": "Registration Date", 
        format: "{0:dd/MM/yyyy}", 
        filterable: {ui: dateFilter, extra: "false"} 
       } 
   ]; 
       .... 
   

2. , जब मैं ग्रिड में डेटा रीफ्रेश करना चाहता हूं, मैं कोणीय $ संसाधन का उपयोग करके कॉलबैक का उपयोग करता हूं। :

   $scope.doSearch = function() { 
       $scope.regs = AppService.query({"regId": $scope.searchAppId}, function(result) { 
        $scope.registrations.read(); 
       }); 
   }; 
   

यह काम करता है। इस समाधान का अतिरिक्त लाभ यह है कि आपको जावा स्क्रिप्ट कोड में ग्रिड निर्माण को स्थानांतरित करने की आवश्यकता नहीं है, यह HTML में रह सकता है।

Answer 2

मैं यह कर तय निम्नलिखित:

मैं इस तरह एक कॉलबैक मेरी संसाधन समारोह दिया:

SkillFactory.getSkills({}, 
    function success(data) { 
     createGrid(data); 
    }); 

समारोह createGrid (डेटा) में; मैं इस तरह के आंकड़ों को प्रारंभ:

function createGrid(gridData) { 
$("#skillGrid").kendoGrid({ 
    dataSource: { 
    data: gridData, 
    schema: { 
     model: { 
     fields: { 
       ID: { type: "number" }, 
       Name: { type: "string" }, 
       CreatedBy: { type: "number" }, 
       CreatedDate: { type: "string" }, 
       EditedBy: { type: "number" }, 
       EditedDate: { type: "string" }, 
       InUse: { type: "boolean" } 
       } 
      } 
      }, 
     pageSize: 20 
     }, 

तो प्रारंभ की डेटा विशेषता में मैं डेटा सेट जब यह सफलतापूर्वक प्राप्त है। मुझे उम्मीद है कि यह मदद करता है!

Answer 3

क्या आपने कोणीय में $ q वादों को देखा है? $q promises in Angular

Answer 4

ऐसा कुछ आपको सही रास्ते पर ले जाएगा। आप ट्रांसपोर्ट रीड विधि में अपने फैक्ट्री को सरल से कॉल कर सकते हैं। आप बस मिश्रण और मिलान नहीं कर सकते हैं या तो आप सभी को पढ़ना, बनाना और नष्ट करना विधियों का उपयोग करना है या उन्हें सभी को अंतिम बिंदु यानी यूआरएल: '/ api/myservice /' को $ http का उपयोग करने के बजाय स्पष्ट रूप से कॉल करना होगा बस आप अपने एप्लिकेशन में साथ किसी अन्य जगह में करते हैं अपने कारखाने की खपत:

$scope.Source = new kendo.data.DataSource({ 

    transport: { 

     read: function (options) { 

      return $http.post('/api/getReportData/', {sDate: '', eDate: ''}) 
       .success(function (data) { 

        options.success(data); 
        Toaster.Info("Refreshed"); 

       }) 
       .error(function() { 
        return; 
       }); 

      console.log("mmm"); 
     } 

    } 

});