AngularJS aktualisiert keine Ansicht

Ich habe ein Problem mit AngularJS. Die Ansicht wird nicht aktualisiert, wenn ich Daten in der JSON-Datei bearbeite. Ich habe versucht, auch auf diese Weise "$ scope.loadData = function() {}" zu machen, aber es ändert nichts!
Vielen Dank für die Hilfe.AngularJS aktualisiert keine Ansicht

HTML-Code

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

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

JSON-Daten

{ 
    "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!" 
     } 
    ] 
}

Quelle

2016-07-30 ProtoTyPus

löschen –

Ihren Browser-Cache @VanyaAvchyan es doesn‘ t ändern nichts – ProtoTyPus

Wenn Sie die Datei auf dem Server Ihres Kunden nicht wissen, über diese Änderung zu ändern.

Dinge, die Sie tun können:

ein websocket Verwenden Sie den Client er das JSON-Datei neu geladen werden muss benachrichtigen (You'l serverseitige Unterstützung benötigen)
Verwenden Abfrage Intervall um die Datei zu probieren und erneut zu laden (Einfachere)

beispielsweise einfache Abfrage mit 1-Sekunden-Intervall:

var app = angular.module('myApp'); 

app.controller('TimetableCtrl', function($scope, $http, $timeout) { 

    var nextPolling; 
    var pollingInterval = 1000; // 1 second 
    var _polling = function() 
    { 
     $http.get('js/items.json') 
      .success(function(data) {$scope.sessions = data.sessions;}) 
      .error(function(data) {console.log('error');}) 
      .finally(function(){ nextPolling = $timeout(_polling, pollingInterval); }); 
    }; 

    _polling(); 

    $scope.$on('$destroy', function(){ 
     if (nextPolling){ 
      $timeout.cancel(nextPolling); 
     } 
    }); 

});

Quelle

2016-07-30 12:51:06

Das funktioniert ** können Sie mir $ scope.on ('$ destroy') erklären? Tut mir leid, aber ich lerne Angular aus ein paar Tagen! – ProtoTyPus

bedeutet dies, dass das Abfrageintervall abgebrochen wird, sobald Sie Ihre Route verlassen haben (der Controller wird zerstört). –

Also passiert die $ destroy nur, wenn ich die Seite verlasse oder immer wenn ein Polling ausgeführt wurde? – ProtoTyPus

Es ist ein Versprechen, so dass es $ scope.sessions setzt, nachdem es zurückgibt.

Veränderung wie diese,

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

}]);

Arbeiten App

Quelle

2016-07-30 12:48:11 Sajeetharan

Es funktioniert in Ihrem Beispiel Website, aber in einer realen Website nicht! – ProtoTyPus

ich glaube nicht, dass es seine Situation löst. see, ploker aktualisiert die Seite automatisch, wenn Sie die JSON-Datei ändern, dies funktioniert nur auf Plunker, so dass die neu geänderte Datei nach dem Laden nicht angezeigt wird –

Sie verwenden $scope, was nicht empfehlenswert ist, wie in this Artikel von John Pappas beschrieben. es Ändern Sie die Controller-Instanz zu verwenden, so dass Ihr Code wie im folgenden Beispiel aussehen:

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>

Quelle

2016-07-30 12:59:24 fmodos

AngularJS aktualisiert keine Ansicht

Antwort

Verwandte Themen