角范围.$watchCollection不止一次检查收集

Angular scope.$watchCollection not checking collection more than once

本文关键字：检查 不止一次 watchCollection 范围      更新时间：2023-09-26

我正在编写的一些代码应该利用我上传的文件。

问题说明

基本上，我正在做的这个小项目有两个部分。第一部分是我编写的一个指令，它监视文件输入并捕获正在上传的文件。然后将捕获的文件添加到位于其父作用域的数组中。第二部分是一个控制器，它使用$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',[]);
})();

总结

我不确定原来的问题是什么，但我想出了一个重新工作，没有遇到原来的问题，可以捕获和操作文件。如果有人能找出最初的问题，我将不胜感激。不管怎样，这都是一个可行的解决方案。

相关文章：