我遇到了一些代码的问题我写的应该使用我上传的文件。
基本上，我在这个迷你项目中有两个部分我正在工作。第一部分是我编写的指令，用于监视文件输入并捕获正在上载的文件。然后将捕获的文件添加到位于其父范围内的阵列中。第二部分是一个控制器，它使用$ watchCollection监视其作用域上的文件数组，即父作用域的指令。主要问题是，$ watchCollection只触发一次。
<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);
}
}
}
})();
我不确定为什么$ watchCollection不会触发compareControl.file的任何新更新。任何帮助将不胜感激。感谢。
如果有人想弄乱它，这是一个plnkr
答案 0 :(得分：1)
好的，所以我仍然不确定我的原始代码的最终问题是什么，但对于子孙后代，我发布了我提出的重新工作，这是有效的。
<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',[]);
})();
我不确定最初的问题是什么，但我想出了一个没有遇到原始问题的重新工作，可以捕获和操作文件。如果有人能够解决原始问题，我会非常感激。无论哪种方式，这都是一个有效的解决方案。