Angular scope.$watchCollection 不检查集合不止一次

Question

我正在编写的一些代码有问题，这些代码应该使用我正在上传的文件。

问题说明

基本上，我正在工作的这个迷你项目有两个部分。第一部分是我编写的指令，它监视文件输入并捕获正在上传的文件。然后将捕获的文件添加到位于其父范围内的数组中。第二部分是一个控制器，它使用 $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 如果有人想弄乱它

Answer 1

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

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',[]);
})();

总结

我不确定原始问题是什么，但我想出了一个没有遇到原始问题并且可以捕获和操作文件的重新工作。如果有人能弄清楚原来的问题，我仍然会非常感激。无论哪种方式，这都是一个可行的解决方案。

Angular scope.$watchCollection 不检查集合不止一次

Angular scope.$watchCollection not checking collection more than once

html

javascript

dom

watch

angularjs

问题说明

代码

HTML

App.module.js

App.compare.controller.js

App.dropin.directive.js

HTML

App.compare.controller.js

App.module.js

总结