触发点击事件的 angular.element 不起作用



我一直试图在我的输入元素中使用其他元素中的角度点击来触发点击事件,比如:

html

<div class="myClass" ng-click="vm.selectImage()" nv-file-drop uploader="vm.uploadImage">
    Drop your image here
</div>
<div ng-hide="!hideInput">
    <input type="file" id="imgSelect" nv-file-selec uploader="vm.uploadImage" />
</div>

控制器

vm.selectImage= selectImage;
function selectImage() {
    angular.element('#imgSelect').trigger('click');
};

我知道还有其他类似的问题,但我试着使用他们所说的(他们中的一些人显示了我正在使用的相同代码),例如:

  • 如何使用angularjs触发ng-click中另一个元素的点击事件
  • angular文件上传-如何使放置区域可点击
  • 如何通过类名或id获取元素

但即使这样,甚至使用这样的指令:

.directive('selectImg', selectImg);
function selectImg() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            element.bind('click', function(e) {
                //option 1
                angular.element(e.target).siblings('.imgSelect').trigger('click');
                //option 2
                angular.element( document.querySelector( '#imgSelect' ) ).trigger('click');
                //option 3
                var myEl = angular.element( document.querySelector( '#imgSelect' ) );
                myEl.trigger('click');
                //option 4
                angular.element('#imgSelect').trigger('click'); //angular way
            });
        }
    };
}; 

我一直收到这个错误:

错误:[jqLite:nosel]http://errors.angularjs.org/1.5.0-beta.1/jqLite/nosel

下面是一个演示错误的plunker:http://plnkr.co/edit/rWcCbixwFArYhCxUVTsv?p=preview

问题出在哪里?

ok更新了我的答案,这很有效。看来你必须跳出当前的$apply()循环。一种方法是使用$timeout()

setTimeout(function() {
    document.getElementById('imgSelect').click()        
 }, 0);

check answer触发AngularJS 中的输入文件点击事件

最新更新