个人中心
gpt4 book ai didi

javascript - AngularJS 不更新 View

转载 作者：行者123 更新时间：2023-11-29 10:34:43 25 4
gpt4 key购买 nike

我对 AngularJS 有疑问。如果我编辑 JSON 文件中的数据，它不会更新 View 。我也尝试过以这种方式做 "$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!"
        }
    ]
}

最佳答案

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

你可以做的事情:

  • 使用 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);
        }
    });

});

关于javascript - AngularJS 不更新 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38674072/

25 4 0
文章推荐： ios - NSTimer 启动后如何更改显示的时间格式？
文章推荐： ios - RubyMotion 中的只读属性
文章推荐： javascript - react : Why is it necessary to have immutable props if values are passed as by value anyway?
文章推荐： ios - webview 不显示在 iphone 6 的全屏上
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com