Javascript 角度范围。$watchCollection不多次检查集合
我在编写一些代码时遇到了问题，这些代码应该利用我上传的文件Javascript 角度范围。$watchCollection不多次检查集合,javascript,html,angularjs,dom,watch,Javascript,Html,Angularjs,Dom,Watch,我在编写一些代码时遇到了问题，这些代码应该利用我上传的文件 问题的解释 基本上，我有两个部分的这个小项目，我正在工作。第一部分是我编写的指令，它监视文件输入并捕获正在上载的文件。然后将捕获的文件添加到位于其父作用域上的数组中。第二部分是一个控制器，它使用$watchCollection监视其作用域（即指令父作用域）上的文件数组。主要问题是，$watchCollection只触发一次 代码 HTML App.compare.controller.js App.dropin.directive.
问题的解释 基本上，我有两个部分的这个小项目，我正在工作。第一部分是我编写的指令，它监视文件输入并捕获正在上载的文件。然后将捕获的文件添加到位于其父作用域上的数组中。第二部分是一个控制器，它使用$watchCollection监视其作用域（即指令父作用域）上的文件数组。主要问题是，$watchCollection只触发一次
代码 HTML App.compare.controller.js App.dropin.directive.js 我不知道为什么$watchCollection没有在对compareControl.file进行任何新更新时触发。任何帮助都将不胜感激。谢谢
这是一个如果有人想搞乱它的问题，好吧，所以我仍然不确定我的原始代码的最终问题是什么，但对于子孙后代，我将发布我所做的工作 HTML App.module.js
总结
我不确定最初的问题是什么，但我提出了一个重新工作，它没有经历最初的问题，可以捕获和操作文件。如果有人能理解最初的问题，我仍然非常感激。无论哪种方式，这都是一个有效的解决方案。我支持您的问题和答案，因为这是一个很好的问题文档。关于可能的解决方案，您可以将手表替换为$emit/$on events
<body ng-app="test">
<div class="container-fluid" ng-controller="compareController as compareControl">
<div class="row">
<div class="col-md-6">
<div class="card card-block">
<div class="form-group">
<label class="card-title" for="fileOneInput">File One</label>
<input dropin
files-binding="compareControl.file"
type="file" class="form-control-file" id="fileOneInput">
</div>
</div>
</div>
<div class="col-md-6">
<div class="card card-block">
<div class="form-group">
<label class="card-title" for="fileTwoInput">File Two</label>
<input dropin
files-binding="compareControl.file"
type="file" class="form-control-file" id="fileTwoInput">
</div>
</div>
</div>
</div>
<div class="jumbotron jumbotron-fluid">
<p class="lead">{{compareControl.files}}</p>
</div>
</div>
</body>
(function(){
'use strict';
angular
.module('test',[]);
})();
(function() {
'use strict';
angular
.module('test')
.controller('compareController', compareControl);
compareControl.$inject = ['$scope'];
function compareControl($scope) {
var vm = this;
var scope = $scope;
vm.files = [];
vm.file = [];
scope.$watch('compareControl.file', comparer,true);
function comparer(newCol, oldCol) {
console.log(newCol);
return (newCol === oldCol) ? console.log(-1) : vm.files.push(newCol);
}
}
})();
(function(){
'use strict';
angular
.module('test')
.directive('dropin', dropin);
function dropin(){
var directive = {
restrict: 'A',
link: link,
scope: {
file: '=filesBinding'
}
};
return directive;
function link(scope,elem,attr) {
elem.bind('change', captureFiles);
function captureFiles(){
console.log(1);
console.log(this.files);
scope.file = this.files;
console.log(scope.file);
}
}
}
})();
<body ng-app="test">
<div class="container-fluid" ng-controller="compareController as compareControl">
<div class="row">
<div class="col-md-6">
<div class="card card-block">
<div class="form-group">
<label class="card-title" for="fileOneInput">File One</label>
<input onchange="angular.element(this).scope().captureFile(this)"
type="file" class="form-control-file" id="fileOneInput">
</div>
</div>
</div>
<div class="col-md-6">
<div class="card card-block">
<div class="form-group">
<label class="card-title" for="fileTwoInput">File Two</label>
<input onchange="angular.element(this).scope().captureFile(this)"
type="file" class="form-control-file" id="fileTwoInput">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<div class="card-header" style="background-color: #999; border-color: #999;">
<button class="btn btn-primary"
ng-click="compareControl.compareFiles()">Compare Files</button>
</div>
<div class="card-block" >
<p class="card-text">{{compareControl.results}}</p>
</div>
</div>
</div>
</div>
</body>
(function() {
'use strict';
angular
.module('test')
.controller('compareController', compareControl);
compareControl.$inject = ['$scope'];
function compareControl($scope) {
var vm = this;
var scope = $scope;
var files = [];
scope.captureFile = captureFile;
vm.compareFiles = compareFiles;
vm.results;
function captureFile(file) {
files.push(file);
}
function compareFiles() {
}
}
})();
(function(){
'use strict';
angular
.module('test',[]);
})();