AngularJSがビューを更新しない

AngularJSに問題があります。 JSONファイルのデータを編集すると、ビューが更新されません。私はこのようにして "$ scope.loadData = function（）{}"でもしようとしましたが、何も変わりません！
ありがとうございました。AngularJSがビューを更新しない

HTMLコード

<!doctype html> 
    <html ng-app> 
     <head> 
     <title>JavaScript &amp; jQuery - Chapter 9: APIs - Angular with remote data</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> 
     <script src="js/angular-external-data.js"></script> 
     <link rel="stylesheet" href="css/c09.css"> 
     </head> 
     <body> 
     <header><h1>THE MAKER BUS</h1></header> 
     <h2>Session Times</h2> 
     <div class="third"><img src="img/toys1.jpg" alt="Circuit boards" /></div> 
     <div class="two-thirds" id="timetable"> 
      <table ng-controller="TimetableCtrl"> 
      <tr><th>time</th><th>title</th><th>detail</th></tr> 
      <tr ng-repeat="session in sessions"> 
       <td>{{ session.time }}</td> 
       <td>{{ session.title }}</td> 
       <td>{{ session.detail }}</td> 
      </tr> 
      </table> 
     </div> 
     </body> 
    </html>

AngularJSコード

function TimetableCtrl($scope, $http) { 
    $http.get('js/items.json') 
     .success(function(data) {$scope.sessions = data.sessions;}) 
     .error(function(data) {console.log('error');}); 
}

JSONデータ

{ 
    "sessions": [ 
     { 
      "time": "09.00", 
      "title": "Intro to 3D Modeling", 
      "detail": "Come learn how to create 3D models of parts you can then make on our bus! You'll get to know the same 3D modeling software that is used worldwide in professional settings like engineering, product design, and more. Develop and test ideas in a fun and informative session hosted by Bella Stone, professional roboticist." 
     }, 
     { 
      "time": "10.00", 
      "title": "Circuit Hacking", 
      "detail": "Head to the Electro-Tent for a free introductory soldering lesson. There will be electronics kits on hand for those who wish to make things, and experienced hackers and engineers around to answer all your questions. Feel free to bring your own projects to work on if you have them! Run by Luke Seyfort, elite hacker and The Maker Bus' official lab monitor." 
     }, 
     { 
      "time": "11.30", 
      "title": "Arduino Antics", 
      "detail": "Learn how to program and use an Arduino! This easy-to-learn open source microcontroller board takes all sorts of sensor inputs, follows user-generated programs, and outputs data and power. Arduinos are commonly used in robotics, mechatronics, and all manners of electronics projects around the world. Taught by Elsie Denney, professional software developer with a long previous career as a technical artist in the video game industry, electronics enthusiast and instructor." 
     }, 
     { 
      "time": "13.00", 
      "title": "The Printed Lunch", 
      "detail": "Discover and taste the brave new world of the printed lunch. You will not only get to see how 3D printers are being used to recreate traditional foods, but also see entirely new types of treats being made. Will you be the visitor that we create a chocolate model of?" 
     }, 
     { 
      "time": "14.00", 
      "title": "Droning On", 
      "detail": "We have ways of keeping you awake after lunch. This session will be policed by a set of quadcopters remotely controlled via many different types of sensor hooked up to an Arduino board. Snoozing could result in a visit from the drones..." 
     }, 
     { 
      "time": "15.00", 
      "title": "Brain Hacking", 
      "detail": "With advances in affordable electro-encephalography, measuring brain waves is something accessible to everyone. Celebrated neuroscientist Cino Rylands will be inviting the audience to participate in creating a symphony of the mind." 
     }, 
     { 
      "time": "16.30", 
      "title": "Make The Future", 
      "detail": "See how the next generation of makers can be inspired to create a new future for themselves. Learn all about the different tools we can use to enlighten and encourage others to get on board the bus!" 
     } 
    ] 
}

出典

2016-07-30 ProtoTyPus

クリアそれはdoesnの@VanyaAvchyanブラウザのキャッシュ –

何かを変更する – ProtoTyPus

作業。あなたが行うことができます

もの：

彼はそのJSONファイルをリロードする必要があるクライアントに通知するためのWebSocketを使用します（You'lは、サーバー側のサポートを必要とする）
ファイルをサンプリングする間隔による使用のポーリングと
0123：1秒間隔で単純なポーリング、例えば

（シンプル）、それをリロード

出典

2016-07-30 12:51:06

この作品** $ scope.on（ '$ destroy'）を教えてください。申し訳ありませんが、私は数日から角を学んでいます！ – ProtoTyPus

ルートを離れると（コントローラが破棄される）、ポーリング間隔はキャンセルされます。 –

$破棄は、ページを離れるとき、または毎回ポーリングが実行されたときにのみ起こります。 – ProtoTyPus

それが戻った後、それは$ scope.sessionsを設定しますので、それは約束です。このような

変更、あなたのクライアントがその変更について知ることができません、サーバー上のファイルを変更した場合

app.controller("TimetableCtrl", ["$scope","$http", 
    function($scope, $http) { 
      $http.get('test.json').then(function (response){ 
       $scope.sessions = response.data.sessions; 
     }); 

}]);

がApp

出典

2016-07-30 12:48:11 Sajeetharan

あなたのサンプルサイトでは動作しますが、実際のサイトでは動作しません！ – ProtoTyPus

私は彼の状況を解決するとは思わない。 plunkerはjsonファイルを変更すると自動的にページを更新します。これはplunkerでのみ動作しますので、一度ロードされた新しい変更ファイルは表示されません –

あなたは$scopeを使用していますが、これは、John Pappasのthisの記事に記載されているようにお勧めできません。

Javascriptを：あなたのコードは、以下の例のようになりますので、コントローラのインスタンスを使用するように変更し

function TimetableCtrl($scope, $http) { 
     var vm = this; 
     $http.get('js/items.json') 
     .success(function(data) {vm.sessions = data.sessions;}) 
     .error(function(data) {console.log('error');}); 
}

HTML：

<table ng-controller="TimetableCtrl as vm"> 
     <tr><th>time</th><th>title</th><th>detail</th></tr> 
     <tr ng-repeat="session in vm.sessions"> 
      <td>{{ session.time }}</td> 
      <td>{{ session.title }}</td> 
      <td>{{ session.detail }}</td> 
     </tr> 
     </table>

出典

2016-07-30 12:59:24 fmodos

AngularJSがビューを更新しない

答えて

関連する問題