javascript - $scope.$apply() 处于 Angular 工作但抛出错误

Question

我将孤立的示例放在 jsbin 中: http://jsbin.com/deqerelita/1/

场景基本上这个想法很简单。单击按钮， Controller 添加到模型， View 会使用隐藏输入 type="file"进行相应更新。 View 更新后， Controller 单击最后添加的文件输入。

问题当 Controller 在运行 $scope.$apply() 之前单击文件输入时，直到第二次单击才发生任何事情，大概是因为 Angular 尚未注册新输入。当我运行 $scope.$apply() 时，控制台会抛出错误，但会单击输入。

这是 html:

  <div ng-controller="fileButtons">
    <input type="button" ng-click="handleImage.add()" value="add another file button"/>

    <div class="imageUploadPreviewContainer">
        <div class="imageUploadPreview hide" data-ng-repeat="file in files" file-index="{{$index}}">
            <input type="file" class="hide"/>
        </div>
    </div>
  </div>

</div></div>

这是 Angular js:

 var myApp = angular.module('myApp', []);
myApp.controller('fileButtons', ['$scope', '$log',
    function($scope, $log){
        $scope.files = [];
        $scope.handleImage = {
            add: function(){
              $scope.files.push({
                state : 'started'
              });
              $log.log('added');
              $scope.$apply(); 
              angular.element('.imageUploadPreviewContainer .imageUploadPreview:last input[type=file]').trigger('click')
            }
        }
    }
]);

对 Angular 来说是全新的，所以请原谅任何不寻常的设计缺陷

Answer 1

由于$scope.$apply()触发一个$digest，并且在任意时间点的 Angular 上只能有一个$digest > 或 $apply 操作正在进行中。

您应该使用$timeout

 $timeout(function(){
   angular.element('.imageUploadPreviewContainer .imageUploadPreview:last input[type=file]').trigger('click')
 }, 0) 

注意:您应该在 Controller 中注入(inject) $timeout。