如何創建函數從WCF Rest中獲取數據然後顯示到表

Question

我已經聲明瞭獲取WCF Rest的函數名稱是service.js，url獲取Json數據。然後，我創建另一個函數來獲取數據entryCtrl.js然後顯示到HTML

service.js

(function (app) { 
    app.service("CRUD_AngularJs_RESTService", function ($http) { 
    this.getAllEntry = function() { 
     return $http.get("http://localhost:51458/ServiceRequest.svc/GetAllRequest/"); 
    }; 
    }); 
})(angular.module('model')); 

entryCtrl.js

(function (app) { 
    'use strict'; 
    app.controller('entryCtrl', entryCtrl); 
    entryCtrl.$inject = ['$scope']; 
    function entryCtrl($scope) { 
     $scope.pageClass = 'page-entry'; 
     $scope.GetAllRecords = function() { 
      var promiseGet = CRUD_AngularJs_RESTService.getAllEntry(); 
      promiseGet.then(function (pl) { $scope.EntryData = pl.data }, 
       function (errorPl) { 
        $log.error('Some Error in Getting Records.', errorPl); 
       }); 
     } 
    } 
})(angular.module('model')); 

視圖entry.html

<table data-ng-controller="entryCtrl"> 
    <tbody data-ng-repeat="entry in EntryData"> 
    <tr> 
     <td>{{entry.name}}</td> 
     <td>{{entry.telpon}}</td> 
     <td>{{entry.foobar}}</td> 
    </tr> 
    </tbody> 
</table> 

我沒有任何錯誤，表中的數據沒有顯示任何內容。我必須嘗試瞭解它的工作與否的功能？

jush有警告XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience。我不知道這是什麼意思。

Answer 1

函數GetAllRecords()未設置爲$scope。你需要調用之前設置$scope.GetAllRecords = GetAllRecords到$scope.GetAllRecords()：

function entryCtrl($scope) { 
    $scope.pageClass = 'page-entry'; 
    $scope.GetAllRecords = function() { 
     var promiseGet = CRUD_AngularJs_RESTService.getAllEntry(); 
     promiseGet.then(function (pl) { $scope.EntryData = pl.data }, 
      function (errorPl) { 
       $log.error('Some Error in Getting Records.', errorPl); 
      }); 
    } 
    $scope.GetAllRecords(); 
} 

或者，你可以簡單地直接調用GetAllRecords()，因爲你似乎並不需要它在$scope：

function entryCtrl($scope) { 
    $scope.pageClass = 'page-entry'; 
    (function() { 
     var promiseGet = CRUD_AngularJs_RESTService.getAllEntry(); 
     promiseGet.then(function (pl) { $scope.EntryData = pl.data }, 
      function (errorPl) { 
       $log.error('Some Error in Getting Records.', errorPl); 
      }); 
    })(); 
}