我正在工作中开发一个工具，其目标是在表格中显示 2 个特定文件并允许用户应用过滤器。
我决定使用网络技术，但我是一个大初学者，并且面临一些问题。我不知道是由于缺乏知识还是由于编码错误。
通常，我们使用 MEAN Stack 框架开发 Web 工具，但对于这个工具，我们希望摆脱服务器实现，以解决维护问题。
因此，我选择仅使用 HTML、CSS 和 Angularjs。
以下是该工具的原理:
- 用户下载项目，并通过快捷方式打开 HTML 文件(此时所有内容都是本地的)。
- 他可以将他想要在浏览器中观看的文件拖放到网页上的任何位置
- 我们在 JS“ Controller ”中解析它并将其存储在集合中
- 我们在表格中动态显示设置的内容
我的问题:
当我更改绑定(bind)变量的值时， View 不会更新(“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”，我的所有变量都会在 View 中更新。那是因为我在本地“运行”该网站吗？看起来 Angularjs 没有监视值修改... **
非常欢迎任何帮助:)
提前非常感谢!
最佳答案
这是因为 Angular 不知道您的自定义函数 dropHandler、dragOverHandler 和 DragLeaveHandler。
一种解决方案是在自定义处理程序方法的最后调用 $scope.$apply()。
关于javascript - Angularjs 不更新 HTML View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49821518/