AngularJS不使用Javascript函數更新ng-controller函數

Question

我已經構建了一個簡單的AngularJS腳本，我想每隔10秒左右調用一次JSON數據包並更新變量。當我將它放在拉數據函數之外時，它可以工作。我可以發佈app.controller部分，它的工作原理。即使我粘貼了五次，然後改變了最後一次。我想在這裏問。

首先這裏是我拉

{"FirstName":"Test","LastName":"Test"} 

這裏JSON是腳本代碼：

<script> 
    // AngularJS - Init app variable 
    var app = angular.module("MyApp", []); 

    // AngularJS - Set default values to AngularJS variables 
    app.controller("MyCTRL", function ($scope) { 
     $scope.FirstName = "-"; 
     $scope.LastName = "-"; 
    }); 

    var getJSON = function (url, callback) { 
     var xhr = new XMLHttpRequest(); 
     xhr.open("get", url, true); 
     xhr.responseType = "json"; 
     xhr.onload = function() { 
      var status = xhr.status; 
      if (status == 200) { 
       callback(null, xhr.response); 
      } else { 
       callback(status); 
      } 
     }; 
     xhr.send(); 
    }; 

    function pulldata() { 
     getJSON("<thejsonurl>", 
     function (err, data) { 
      if (err != null) { 
       //error has happened 
      } else { 
       app.controller("MyCTRL", function ($scope) { 
        $scope.FirstName = data.FirstName; 
        $scope.LastName = data.LastName; 
       }); 
      } 
     }); 
    } 

    //timer function for loading in page data 
    function pagetimer() { 
     setTimeout(function() { pulldata(); pagetimer(); }, 10000); // 10000 = 10 seconds 
    } 

    //Pull data as soon as webpage is up 
    pulldata(); 
    //Start timer for data refresh 
    pagetimer(); 

下面是HTML部分：

<div ng-app="MyApp" ng-cloak ng-controller="MyCTRL"> 
FirstName: {{FirstName}} 
LastName: {{LastName}} 
</div> 

只是一個僅供參考。驗證了JSON網址正在工作。當我做一個警報（data.FirstName）;在嵌入式功能中。它確實返回了名字。該代碼只是不更新​​MyApp Div中的名字。

Answer 1

爲了幫助，這裏是one solution to your problem I posted on plunker。您將在2秒後看到更新的內容，然後您可以查看控制檯以2秒爲間隔查看不同的呼叫。

我用$間隔調用的getJSON功能每2秒：

vm.promise=$interval(vm.getJSON, 2000); 

的get JSON使用$ HTTP：

vm.getJSON = function() { 
    vm.iterations--; 
    if (vm.iterations < 1) { 
     $interval.cancel(vm.promise); 
     console.log('Stopped interval calls '); 
    } 
    $http({ 
     method: 'GET', 
     url: 'data.json' 
    }).then(function successCallback(response) { 
     // this callback will be called asynchronously 
     // when the response is available 
     console.log('Success '+JSON.stringify(response)); 
     vm.FirstName = response.data.FirstName; 
     vm.LastName = response.data.LastName; 
    }, function errorCallback(reason) { 
     // called asynchronously if an error occurs 
     // or server returns response with an error status. 
     console.log('ERROR: '+JSON.stringify(reason)); 
    }); 
    } 

需要注意的是成功，我們不創建一個新的控制器，但更新變量名和姓：

}).then(function successCallback(response) { 
     // this callback will be called asynchronously 
     // when the response is available 
     console.log('Success '+JSON.stringify(response)); 
     vm.FirstName = response.data.FirstName; 
     vm.LastName = response.data.LastName; 
    }, 

我創建了一個變量iterations我們將調用getJSON多少次：

vm.iterations = 3; // Number of calls to the function 

而且我使用$ interval.cancel停止迭代。

以下是完整的app.js

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

app.controller('MainCtrl', function($scope, $http, $interval) { 
    var vm = this; 
    vm.FirstName = '-'; 
    vm.LastName = '-'; 
    vm.name = 'World'; 
    vm.iterations = 3; // Number of calls to the function 

    vm.getJSON = function() { 
    vm.iterations--; 
    if (vm.iterations < 1) { 
     $interval.cancel(vm.promise); 
     console.log('Stopped interval calls '); 
    } 
    $http({ 
     method: 'GET', 
     url: 'data.json' 
    }).then(function successCallback(response) { 
     // this callback will be called asynchronously 
     // when the response is available 
     console.log('Success '+JSON.stringify(response)); 
     vm.FirstName = response.data.FirstName; 
     vm.LastName = response.data.LastName; 
    }, function errorCallback(reason) { 
     // called asynchronously if an error occurs 
     // or server returns response with an error status. 
     console.log('ERROR: '+JSON.stringify(reason)); 
    }); 
    } 

    vm.promise=$interval(vm.getJSON, 2000); 


}); 

的HTML看起來像這樣：

<!DOCTYPE html> 
<html ng-app="plunker"> 

(...) 
    <body ng-controller="MainCtrl as vm"> 
    <p>Hello {{vm.name}}!</p> 
    <div> 
     <P> 
     FirstName: {{vm.FirstName}} 
     </P> 
     <P> 
     LastName: {{vm.LastName}} 
     </P> 

    </div> 
    </body> 

</html> 

我創建了一個名爲data.json一個JSON文件。

希望這會有所幫助。讓我們知道。