Question

我把孤立的例子放在一个jsbin中： http://jsbin.com/deqerelita/1/

方案基本上这个想法很简单。单击一个按钮，控制器添加到模型，视图将相应更新，隐藏输入类型=“文件”。更新视图后，控制器会单击最后添加的文件输入。

问题当控制器在运行$ 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>

这是角度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')
            }
        }
    }
]);

全新的棱角分明如此赦免任何无设计的设计缺陷

Answer 1

当$scope.$apply()触发$digest并且在任何时间点处于角度时，只有一个$digest或$apply操作正在进行中。

您应该使用$timeout

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

注意：您应该在控制器中注入$ timeout。

Answer 2

我会使用$timeout

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

$ scope。$ apply（）在角度工作但抛出错误

2 个答案: