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

【问题标题】：angular.element to trigger click event doesn't workangular.element 触发点击事件不起作用
【发布时间】：2015-11-28 21:32:07
【问题描述】：

我一直在尝试使用其他元素中的角度 ng-click 在我的输入元素中触发点击事件，如下所示：

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');
};

我知道还有其他类似的问题，但我尝试使用他们所说的（其中一堆显示我正在使用的相同代码），例如：

但即便如此，甚至使用这样的指令：

.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

有什么问题？

【问题讨论】：

请创建一个演示问题的 plunkr
@GaneshKumar 我已经用 plunker 更新了我的问题。
问题是你不是用 Angular 的方式做的，所以它不起作用也就不足为奇了。您的所有版本都不可靠，因为它们尝试处理不在指令上下文中的 DOM，因此当您尝试使用模板时，模板可能不在 DOM 中。
angular.element() 没有 trigger() 方法。 docs.angularjs.org/api/ng/function/angular.element
删除选择器或添加jquery，jqury lite不支持选择器

标签： angularjs

【解决方案1】：

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

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

查看答案Trigger input file click event in AngularJS

【讨论】：

控制台中没有更多错误。但是不应该打开输入来添加文件吗？