javascript - Angular作用域。$ watchCollection不会多次检查集合

我正在编写的某些代码存在问题，这些代码应该利用我正在上传的文件。

问题说明

基本上，我要参与的这个微型项目有两个部分。第一部分是我编写的指令，它监视文件输入并捕获要上传的文件。然后将捕获的文件添加到位于其父范围内的数组。第二部分是一个控制器，它使用$ watchCollection在其作用域（即父作用域的指令）上监视文件数组。主要问题是，$ watchCollection仅触发一次。

码

的HTML

<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>

App.module.js

(function(){
  'use strict';

  angular
     .module('test',[]);
})();

App.compare.controller.js

(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);
    }
  }
})();

App.dropin.directive.js

(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，如果有人想弄乱它

最佳答案

好的，所以我仍然不确定我的原始代码的最终问题是什么，但是为了后代，我发布了我想出的返工方法。

的HTML

<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>

App.compare.controller.js

(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() {

    }
  }
})();

App.module.js

(function(){
  'use strict';

  angular
      .module('test',[]);
})();

摘要

我不确定最初的问题是什么，但是我想出了一个重新设计的方法，该过程不会遇到最初的问题，并且可以捕获和处理文件。如果有人能解决原始问题，我仍然将不胜感激。无论哪种方式，这都是可行的解决方案。