AngularJSはJavaScript関数でng-controllerを更新していません

私は10秒ごとにJSONパケットを呼び出して変数を更新したい簡単なAngularJSスクリプトを作成しました。プル・データ関数の外に置いておくと動作します。私はapp.controllerの部分を投稿することができ、それは動作します。たとえそれを5回貼り付けて最後のものを変えたとしても。私はここで尋ねたと思った。ここAngularJSはJavaScript関数でng-controllerを更新していません

まずJSONは、私がここで

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

を引っ張っていているスクリプトコードさ：

<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>

だけFYI。 JSON URLが動作していることを確認しました。アラートをすると（data.FirstName）;埋め込み関数内で。それは最初の名前を返します。このコードではMyApp部門のFirstNameは更新されません。

出典

2016-06-21 Michael Kagarise

AngularJSチュートリアルを読む必要があります。アプリケーションが開始されたら、コントローラを再定義することはできません。 Angularには$ httpサービスがあります。それはあなたが使用すべき$タイムアウトサービスを持っています。コードは、グローバル関数ではなく、角度成分の内側に配置する必要があります。 –

最初にAngularが外国人に見えるかもしれませんが、それをうまく使いたいのであれば、本当にそれを受け入れる必要があります。 JBは絶対に正しいです。簡単で基本的なチュートリアルから始め、基本の学習と理解に焦点を当てます。あなたが現在持っている問題を適切に修正するために現在行っていることには、コアの問題が多すぎます。 –

助けてください、ここにはone solution to your problem I posted on plunkerです。 2秒後に内容が更新されたことがわかり、コンソールを見て2秒間隔でさまざまな通話を見ることができます。

私がgetJSON機能ごとに2秒呼び出すために$間隔を使用

：JSONは$ HTTPを使用して取得

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

を：成功の上に、我々は新しいコントローラを作成しないことを

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; 
    },

に私はインディ変数反復を作成しました私たちはgetJSONを何回呼び出しますか：

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

そして、$ interval.cancelを使って反復を止めます。

<!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ファイルを作成：ここで

は、HTMLは次のようになりますフル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); 


});

です。

これが役に立ちます。我々に教えてください。

出典

2016-06-22 01:10:07 Gregori

AngularJSはJavaScript関数でng-controllerを更新していません

答えて

関連する問題