AngularJS不会更新HTML视图

Question

我正在开发一种工作工具，其目的是在表中显示2个特定文件，并允许用户应用过滤器。

我决定使用网络技术，但是我是个初学者，因此遇到一些问题。 我不知道它们是由于缺乏知识还是由于编码错误。

通常，我们使用MEAN Stack框架开发Web工具，但是对于这一工具，我们出于维护方面的考虑而希望摆脱服务器实现。

因此，我选择仅使用HTML，CSS和Angularjs。

因此，这里是该工具的原理：

用户下载项目，然后通过快捷方式打开HTML文件（所有内容都是本地的）。
他可以在网页上的任意位置拖放要在浏览器中观看的文件
我们将其解析为JS“控制器”以将其存储在集合中
我们在表格中动态显示设置内容

我的问题：

当我更改绑定变量的值时， 视图不会更新 （“ ng-if”，“ ng-show”，“ ng-hide”等也都不会更新 。） 除非我触发了诸如“ ng-click”（甚至为空）

代码：

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：

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
}

**如果我单击具有“ ng-click”属性的div“ visal-drop-zone”，则所有变量都会在视图中更新。 那是因为我在本地“运行”网站吗？ 看来Angularjs不在关注价值修改... **

任何帮助都将非常受欢迎:)

在此先多谢！！

Answer 1

这是因为Angular不了解您的自定义函数dropHandler，dragOverHandler和dragLeaveHandler。

一种解决方案是在自定义处理程序方法的最后调用$scope.$apply() 。

Answer 2

删除处理程序不是AngularJS事件，“只是” DOM事件，因此它不知道需要更新所有内容。 您可以通过在放置处理程序末尾调用$scope.$digest()来推送更新。 当然，这需要您在控制器内定义放置处理程序，以便可以在其中捕获$scope 。

考虑到控制器不应该与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