AngularがJSONファイルで更新しないのはなぜですか？

Question

JSONファイルからウェブサイトにデータを読み込むのに、簡単なAngular JSアプリケーションを使用しようとしていますが、動作しません。

JSONファイルは次のとおりです。

{"a": "a"} 

角度アプリは次のとおりです。

var app = angular.module("app", []) 
    .controller("ctrl", ["ser", function(ser) { 
    var vm = this; 

    ser.getInfo().then(function(data) { 
     vm.data = data; 
    }); 
    }]) 
    .service("ser", function() { 
    this.getInfo = function() { 
     return $.get("models/model.json"); 
    }; 
    }); 

HTMLは次のとおりです。

<div ng-controller="ctrl as ctrl"> 
    <p>{{ctrl.data.a}}</p> 
</div> 

私は任意のコンソールエラーが届きません。私は問題がコントローラーの非同期getInfo().then()呼び出しのためにコントローラの語彙スコープに関連していると思いますが、関数内でvmをチェックして正しくロードされていますが、ctrlオブジェクトを変更していないか、それがしたとき。

私はローカルでアプリを提供しています。

時には動作しますが、ほとんどの場合動作しません。私は$scopeを使って動作させることができますが、なぜ今は動作していないのか理解しようとしています。

Answer 1

これは、ajaxにjQueryを使用しているようです。あなたは、角度のコンテキストの外で範囲を変更した場合、あなたはそれが動作する場合、このような問題

var app = angular.module("app", []) 
    .controller("ctrl", ["ser", function(ser) { 
    var vm = this; 

    ser.getInfo().then(function(response) { 
     vm.data = response.data; 
    }); 
    }]) 
    .service("ser", ['$http', function($http) { 
    this.getInfo = function() { 
     return $http.get("models/model.json"); 
    }; 
    }]); 

DEMO

Answer 2

を避けるために、角$httpを使用するダイジェスト

変更を実行するために、角に通知する必要があります$ scopeを指定すると、Angularは非同期操作を実行したことを認識しません。

私は次の行がjQueryのを使用していると思わ：return $.get("models/model.json");

をですから、あなたの関数getInfoからデータを取得しても、それはビューと同期されていないvm.data = data;