AngularJS 不更新视图答案

【问题标题】：AngularJS doesn't update viewAngularJS 不更新视图
【发布时间】：2016-12-05 01:42:55
【问题描述】：

我对 AngularJS 有疑问。如果我编辑 JSON 文件上的数据，它不会更新视图。我也尝试过以这种方式执行“$scope.loadData = function() {}”，但它并没有改变任何东西！
之前谢谢你的帮助。

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

【问题讨论】：

清除浏览器缓存
@VanyaAvchyan 它不会改变任何东西

标签： javascript angularjs json model-view-controller

【解决方案1】：

您正在使用 $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>

【讨论】：

【解决方案2】：

如果您更改服务器上的文件，您的客户端将不会知道该更改。

你可以做的事情：

使用 websocket 通知客户端他需要重新加载该 json 文件（您需要服务器端支持）
使用按间隔轮询对文件进行采样并重新加载（更简单）

例如，以 1 秒为间隔的简单轮询：

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

});

【讨论】：

这行得通**你能解释一下 $scope.on('$destroy') 吗？抱歉，我从几天前开始学习 Angular！
表示一旦离开路由（控制器将被销毁），轮询间隔将被取消。
所以 $destroy 仅在我离开页面或每次执行轮询时发生？
是的，destroy 事件将在您离开路线时触发。当您使用多条路由（单页应用程序）实现 Web 应用程序并且没有完全刷新时，它是相关的。
非常感谢！

【解决方案3】：

这是一个承诺，所以它会在返回后设置 $scope.sessions。

这样改，

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

}]);

工作App

【讨论】：

它在您的示例站点中有效，但在真实站点中却不行！
我认为这并不能解决他的问题。看，当你更改 json 文件时，plunker 会自动刷新页面，这仅适用于 plunker，因此一旦加载就不会显示新修改的文件