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

【问题标题】：Angular scope.$watchCollection not checking collection more than onceAngular scope.$watchCollection 不检查集合不止一次
【发布时间】：2016-12-28 09:05:15
【问题描述】：

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

问题说明

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

【问题讨论】：

标签： javascript html angularjs dom watch

【解决方案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',[]);
})();

总结

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

【讨论】：

我赞成你的问题和答案，因为问题的文档做得很好。关于可能的解决方案，您可以将手表替换为 $emit/$on 事件