Question

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

我决定使用网络技术，但我是一个很大的初学者，我面临一些问题。我不知道他们是由于缺乏知识还是编码错误。

通常，我们使用MEAN Stack框架开发Web工具，但是对于这个，我们想要摆脱服务器实现以解决维护问题。

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

以下是该工具的原则：

用户下载项目，并通过快捷方式打开HTML文件（一切都是本地的）。
他可以在网页上拖放他想要在浏览器中观看的文件
我们在JS＆＃34;控制器中解析它＆＃34;将其存储在一组
我们在表格中动态显示设定内容

我的问题：

当我更改绑定变量的值时，视图未更新（＆＃34; ng-if＆＃34;，＆＃34; ng-show＆＃34; ，＆＃34; ng-hide＆＃34;等。表达式除非我触发事件，例如＆＃34; ng-click＆＃34; （甚至是空的）

代码：

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
}

**如果我点击div＆＃34; visal-drop-zone＆＃34;它有一个＆＃34; ng-click＆＃34;属性，我的所有变量都在视图中更新。那是因为我＆＃34;运行＆＃34;本地的网站？看起来Angularjs并没有注意到价值修改...... **

非常欢迎任何帮助:)

提前多多感谢!!

Answer 1

那是因为Angular不知道您的自定义函数dropHandler，dragOverHandler和dragLeaveHandler。

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

Answer 2

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

考虑到控制器不应该与DOM交互，更好的方法是使用指令来处理DOM事件，但控制器方法将起作用。

Angularjs不会更新HTML视图

2 个答案: