AngularJS不会更新HTML视图

Question

I'm developing a tool at work, whose goal is to display 2 specific files in a table and allow users to apply filters. 我正在开发一种工作工具，其目的是在表中显示2个特定文件，并允许用户应用过滤器。

I decided to use the web technology, but I am a big beginner and I am facing some issues. 我决定使用网络技术，但是我是个初学者，因此遇到一些问题。 I don't know if they are due to a lack of knowledge or to coding errors. 我不知道它们是由于缺乏知识还是由于编码错误。

Usually, we develop web tools using MEAN Stack framework, but for this one we wanted to get rid of the server implementation for maintenance concerns. 通常，我们使用MEAN Stack框架开发Web工具，但是对于这一工具，我们出于维护方面的考虑而希望摆脱服务器实现。

Consequently, I chose to use only HTML, CSS and Angularjs. 因此，我选择仅使用HTML，CSS和Angularjs。

So here are the principles of the tool : 因此，这里是该工具的原理：

The user downloads the project, and via a shortcut opens a HTML file (everything is local then). 用户下载项目，然后通过快捷方式打开HTML文件（所有内容都是本地的）。
He can drag-and-drop wherever he wants on the webpage the files he wants to watch in his browser 他可以在网页上的任意位置拖放要在浏览器中观看的文件
We parse it in a JS "controller" to store it in a set 我们将其解析为JS“控制器”以将其存储在集合中
We display the set content's dynamically in a table 我们在表格中动态显示设置内容

My issue : 我的问题：

When I change the value of a binded variable, the view is not updated (neither are the "ng-if", "ng-show", "ng-hide", etc.. expresions) unless I trigger an event such as "ng-click" (even empty) 当我更改绑定变量的值时， 视图不会更新 （“ ng-if”，“ ng-show”，“ ng-hide”等也都不会更新 。） 除非我触发了诸如“ ng-click”（甚至为空）

CODE : 代码：

HTML : HTML：

<!doctype html>
<html lang="fr" id="drop-zone" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)" ondragleave="dragLeaveHandler(event)">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="css/style.css" rel="stylesheet"  />
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="app.js"></script>
<script src="Controllers/fileReader.controller.js"></script>
<script src="node_modules/papaparse/papaparse.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/alasql/dist/alasql.js"></script>
</head>

<!-- Body -->
<body ng-app="app" ng-controller="HomeController as vm" >
<h1> ... </h1>
<h2> ... </h2>

<div id="visual-drop-zone" class="upload-drop-zone" ng-hide = "vm.dataFed">
Just drag Swap file(s) here
</div>

<table class="table table-striped table-condensed table-bordered text-center" ng-if = "vm.dataFed">
<thead>
<tr>
<th rowspan="2"> ... </th>
<th rowspan="2"> ... </th>
<th rowspan="2"> ... </th>
<th rowspan="2"> ... </th>
<th rowspan="2"> ... </th>
<th rowspan="2"> ... </th>
<th colspan="9"> ... </th>
<th ng-if = "vm.busData.length > 0" colspan="9"> ... </th>
</tr>
<tr>
<div ng-show = "vm.ecoData.length > 0">
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
</div>
<div ng-show = "vm.bus.length > 0">
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
</div>
</tr>
</thead>
<tbody>
<div ng-if = "vm.ecoData.length > 0">
<tr ng-repeat="record in vm.ecoData">
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
</tr>
</div>
<div ng-if = "vm.busData.length > 0">
<tr ng-repeat="fltRec in vm.busData">
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
<td>{{record.something}}</td>
</tr>
</div>
</tbody>
</table>
</body>
<!-- /Body -->

</html>

Javascript : Javascript：

angular.module('app').controller('HomeController', ['$scope', HomeController]);

var vm;

function HomeController($scope){

  vm = this;

  vm.records = [];

  vm.record = {
    something : '',
    something : -1,
    something : '',
    ...
  };

  vm.ecoData = [];
  vm.busData = [];
  vm.joinedData = [];

  vm.dataFed = false;

};

function dropHandler(event){
  var dropZone = document.getElementById('drop-zone');

  event.preventDefault();

  for (var i = 0; i < event.dataTransfer.files.length; i++) { //For each file dropped in the zone
    if(event.dataTransfer.files[i].name.includes("eco")){ //We check its name to know the data type
      Papa.parse(event.dataTransfer.files[i], {
        header: true,
        complete: function(results){ // callback executed when parsing is fully completed
          console.log("before feeding : vm.dataFed => ", vm.dataFed);
          vm.ecoData = results.data;
          vm.dataFed = true;
          console.log("after feeding : vm.dataFed =>", vm.dataFed);
        }
      });
    }
    else{
      Papa.parse(event.dataTransfer.files[i], {
        header: true,
        complete: function(results){  // callback executed when parsing is fully completed
          vm.busData = results.data;
          vm.dataFed = true;
          console.log("vm.busData =>", vm.busData);
        }
      });
    }
  }
}

function dragOverHandler(event){
  event.preventDefault();
  document.getElementById('visual-drop-zone').className = 'upload-drop-zone drop'; // some visual modifications
}

function dragLeaveHandler(event){
  event.preventDefault();
  document.getElementById('visual-drop-zone').className = 'upload-drop-zone'; // some visual modifications
}

**If I click on the div "visal-drop-zone" which has a "ng-click" attribute, all my variables are updated in the view. **如果我单击具有“ ng-click”属性的div“ visal-drop-zone”，则所有变量都会在视图中更新。 Is that because I "run" the website locally? 那是因为我在本地“运行”网站吗？ It looks like Angularjs isn't watching for value modifications... ** 看来Angularjs不在关注价值修改... **

Any help would be very welcome :) 任何帮助都将非常受欢迎:)

Thanks a lot in advance!! 在此先多谢！！

Answer 1

That's because Angular doesn't know about your custom functions dropHandler, dragOverHandler, and dragLeaveHandler. 这是因为Angular不了解您的自定义函数dropHandler，dragOverHandler和dragLeaveHandler。

One solution is to call $scope.$apply() at the very end of your custom handler methods. 一种解决方案是在自定义处理程序方法的最后调用$scope.$apply() 。

Answer 2

The drop handler is not an AngularJS event, "just" a DOM event, so it does not know that it needs to update everything. 删除处理程序不是AngularJS事件，“只是” DOM事件，因此它不知道需要更新所有内容。 You can push the update by calling $scope.$digest() at the end of your drop handler. 您可以通过在放置处理程序末尾调用$scope.$digest()来推送更新。 Of course, this requires that you defined the drop handler inside your controller, so that it can capture the $scope there. 当然，这需要您在控制器内定义放置处理程序，以便可以在其中捕获$scope 。

Considering that controllers should not be interacting with the DOM, the better approach would be to have a directive to process the DOM event, but the controller approach will work. 考虑到控制器不应该与DOM交互，更好的方法是有一个处理DOM事件的指令，但是控制器方法可以工作。

AngularJS不会更新HTML视图

问题描述

2 个解决方案

解决方案1
1 2018-04-13 16:36:00

解决方案2
0 2018-04-13 16:36:01

AngularJS不会更新HTML视图

问题描述

2 个解决方案

解决方案1 1 2018-04-13 16:36:00

解决方案2 0 2018-04-13 16:36:01

解决方案1
1 2018-04-13 16:36:00

解决方案2
0 2018-04-13 16:36:01