AngularJS中触发输入文件点击事件

2024-01-04

我正在尝试模拟 AngularJS 中文件输入的单击事件。我见过工作 jQuery 示例 http://jsfiddle.net/fEBFp/1/,但我不想使用 jQuery。

'use strict';

angular.module('MyApp', []).

controller('MyCtrl', function($scope) {
  $scope.click = function() {
    setTimeout(function() {
      var element = angular.element(document.getElementById('input'));
      element.triggerHandler('click');
      $scope.clicked = true;
    }, 0);
  };
});
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
  <input id="input" type="file"/>
  <button ng-click="click()">Click me!</button>
  <div ng-if="clicked">Clicked</div>
</div>

注意:由于某种原因需要按两次按钮才能触发超时功能。

我在用setTimeout因为这个帖子 https://stackoverflow.com/a/19519023/1154610.

如何仅使用 AngularJS / vanilla JavaScript 以编程方式单击文件输入?


你可以简单地使用

 <button type="button" onclick="document.getElementById('input').click()">Click me!</button>

OR

$scope.click = function() {
    setTimeout(function() {
        document.getElementById('input').click()
        $scope.clicked = true;
    }, 0);
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS中触发输入文件点击事件 的相关文章

  • PHP 中的 Javascript“unes​​cape”

    我的图像主机有一个 Google Chrome 扩展程序 它会向我的网站发送一个 URL 该网址得到encoded通过 JavaScript 的escape method 编码的 URLescape看起来像这样 http 253A 4 bp
  • jquery javascript 在 codeigniter 中不起作用

    大家好 感恩节快乐 我在将此脚本包含在 codeigniter 中时遇到一些问题
  • 如何在 Node.js 中将 HTML 转换为图像

    我需要在 Node 服务器上将 HTML 模板转换为图像 服务器将以字符串形式接收 HTML 我尝试过 PhantomJS 使用一个名为 Webshot 的库 但它不能很好地与 Flex 框和现代 CSS 配合使用 我尝试使用 Chrome
  • 如何在 Android 上禁用 HTML 输入中的自动更正?

    我无法在 Android 上的网络浏览器中禁用文本输入的自动更正 我试过这个
  • 创建地图后向 Google 地图 v3 添加标记

    我对使用 Google Maps API 比较陌生 现在我正在开发一个项目 用户可以选择各种搜索过滤器并查看结果自动显示在地图上 而无需重新加载页面 到目前为止 我的方法是创建一个控制地图的 Javascript 对象 以便我可以按照我的意
  • 通过 JavaScript 获取页面/iframe 的编码

    我想通过 JavaScript 或浏览器中的其他一些 API 以编程方式确定页面的编码 我想要这些信息的原因是因为我试图对主要浏览器支持的字符编码进行模糊测试 显然仅仅因为我发送了适当的 内容类型 并不意味着浏览器会使用编码做正确的事情 欢
  • 从 json 创建下拉列表

    我有一个这种形式的 json COLUMNS ID Name DATA 1 Joe 2 Sam 3 Doug 我正在寻找一个如何在 javascript 中从该数据创建下拉列表的示例 但 json dropdown 列表的所有示例 json
  • PHP 5 的 HTML 表单库 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个QuickForm替代品 QF 存在性能问题 例如组合框中的许多选项 我还想要一些更面向对象的东西 比如 Zend Form
  • 锚标记内的 CakePHP Span 标记

    我试图让 CakePHP 输出一个如下所示的链接 a href foo bar class some other classes span class icon new span FooBar a 所以我在我看来使用以下代码
  • 如何使用 HTML5 和 Angularjs 正确显示日期 yyyy-MM-dd hh:mm:ss?

    我正在尝试创建一个包含日期和时间的输入 但我不知道如何做到这一点 我尝试过输入datetime tr td Date td td td tr
  • 对同一域发出 get 请求,出现 CORS 错误

    在浏览器扩展中 这是我的 ajax 调用 var xhr new XMLHttpRequest xhr open GET window location href true xhr responseType arraybuffer xhr
  • 在 d3v4 堆积条形图中使用 JSON

    我找到了一个d3v3堆积条形图示例 http bl ocks org mstanaland 6100713我想使用它 因为它使用 json 数据 还有一个d3v4规范条形图示例 https bl ocks org mbostock 3886
  • nested_form/cocoon:可以将表行用于嵌套字段吗?

    我通常不使用表格作为表单 但是当有嵌套表单时 使用nested form或cocoon gem时 可以将每组表单元素放在表格行中吗 对我来说 这似乎非常直观 表中的每一行都代表一个对象 但是 nested form 和 cocoon gem
  • 过早退出 Qualtrics 中的循环和合并块

    我目前正在进行一项 Qualtrics 调查 受访者必须解决一长串字谜问题 然后回答一些人口统计问题 为了使变位词部分更容易 我使用了循环和合并块 第一个字段是要解决的变位词 第二个字段是变位词的解决方案 因此调查可以根据受访者的答案来检查
  • 如何在 vue.js 中使用 SVG.js 插件?

    我在用svg js在我的 Laravel 项目中运行vue js 这就是我使用的方式svg js Step 1 安装svg js作为我的 vue 应用程序中的插件 import svgJs from svg js dist svg expo
  • 让 hashchange 事件在所有浏览器(包括 IE7)中工作

    我有一些代码 由另一位开发人员编写 在 WordPress 内部进行 AJAX 页面加载 例如 没有页面重新加载 当您单击导航项时 AJAX 会刷新主要内容区域 我的问题是它在 IE7 中被破坏了 我不知道从哪里开始调试 最初的开场白是 v
  • 用圆形雷达数学方法表示点

    我正在编写一个简单的应用程序 它可以向您显示您周围的朋友 但不是在法线地图中 而是在像 UI 这样的真正圆形雷达上 https i stack imgur com Au3IP png https i stack imgur com Au3I
  • .js.erb VS .js

    将 Rails 应用程序的 javascript 放入 js erb 文件而不只是将其放入 application js 文件有什么好处 我有一个企业创建按钮 因此我应该将代码放入 create js erb 文件中 还是使用以下方法将其放
  • 如何在 JavaScript 中将样式属性重置为其 CSS 默认值?

    在 php 生成的页面上有几个这样的元素 td class defaultTDStyle style color userDefinedCustomColor td 因此有一个默认样式 我应用了几个额外的样式来覆盖 CSS 中定义的样式 有
  • vuejs2复制剪贴板问题

    我正在尝试使用https alligator io vuejs vue clipboard copy https alligator io vuejs vue clipboard copy 对于 Vue js 中的复制剪贴板功能 它对于字符

随机推荐

  • Javascript背景颜色随着淡入淡出而闪烁

    我有一个 div 需要有持续闪烁的背景颜色 我想要它做的就是淡入透明的 to red并循环返回 我见过几个examples这样做 但它们都会影响整个内容div而不仅仅是background color 其他例子有闪烁background但这
  • UIWebView canGoBack 和 canGoForward 始终返回 NO

    我正在尝试将数据直接加载到UIWebView webView loadData data MIMEType text html textEncodingName utf 8 baseURL nil 数据是一些包含一些外部链接的html字符串
  • 去掉最后一个逗号

    当我的程序打印出整数 5 到 1 时 我需要帮助去掉最后一个逗号 int i for i 10 i gt 1 i if i 2 0 System out print i 2 它打印出来5 4 3 2 1 我想要打印出来5 4 3 2 1 一
  • System.Array 是否对值类型执行装箱?

    我最近做了一些粗略的性能测量List lt gt vs 对于一系列小型结构 System Array 似乎轻而易举地获胜了 所以我就这么做了 我才刚刚意识到 System Array 包含对象类型 所以用结构填充它肯定会导致装箱发生吗 然而
  • 如何在 Node.js 中使用 JQuery 选择器

    我正在尝试从硬盘驱动器中的 HTML 文件中提取电子邮件信息 如果我在 Firefox 中加载文件并运行 jQuerify bookmarklet 我可以成功使用以下选择器 函数 window jQuery a iEmail each fu
  • Rx:如何立即响应并限制后续请求

    我想设置一个 Rx 订阅 它可以立即响应事件 然后忽略指定 冷却 期内发生的后续事件 开箱即用的 Throttle Buffer 方法仅在超时结束后才会响应 这并不是我所需要的 这是一些设置场景并使用 Throttle 的代码 这不是我想要
  • 如何将 x,y,y0 以外的属性附加到 d3 中的流图层?

    我是 d3 新手 我一直在尝试自定义 Streamgraph 示例 http mbostock github com d3 ex stream html http mbostock github com d3 ex stream html
  • Vue debounce 方法?

    我知道 Vue js 内置了在输入字段上进行反跳的功能 我创建了一个滑块 它触发一个不使用输入字段的方法 我想知道是否可以利用方法内部的去抖功能 除了简单地向输入添加去抖功能之外 是否还可以使用此功能 或者我需要为此编写自己的功能吗 我刚刚
  • 从 web.config 重定向到 root 登录页面

    会话过期时 我将用户重定向到登录页面 Login aspx是在根中 我在 web config 文件中声明了这样的路径
  • PHP“while”循环或另一个“while”循环中的“if”语句?

    我有一个返回 HTML 表的 PHP MySQL 查询 但我被困在需要进行第二个查询的部分while循环该查询 我不知道从这里该去哪里 我尝试了几种不同的方法 我希望它循环并给我第一组数据 然后使用 Order ID 并获取第二组数据并将第
  • 如何在Android智能手机中使用加速度传感器找到位移距离?

    我有一部 Android 智能手机 其中包含加速器传感器 指南针传感器和陀螺仪传感器 我想使用这个传感器计算位移距离 我已经尝试过基本方法 即 final velocity initial velocity acceleration tim
  • 切换仅包含相同文本的 div

    HTML div class event div class clicker click div div class title a href first event a div div div class event div class
  • 检索 Facebook 粉丝姓名

    我正在尝试获取我管理的 Facebook 粉丝页面的粉丝姓名 我做了一些窥探 显然 FB API 不支持这一点 但 Facebook 实际上使用 AJAX JSON 来填充列表 无论如何 任何人都可以建议一种方法来让我自己调用并以纯文本形式
  • 超小屏幕上的居中按钮 Material-UI React 不起作用(justify-xs-center)

    我尝试了一切 但似乎我错过了一些东西 当屏幕特别小时 我花了很多时间在网格内制作一个按钮中心 这段代码工作完美 但问题是我希望我的按钮仅在屏幕特别小时而不是在所有尺寸上居中 工作代码 Grid item xs 12 gt
  • 不显示python OpenCV错误

    我正在使用 OpenCV 和 python 更具体地说findTransformECC的功能cv2执行图像配准 如果算法不收敛 此函数可能会引发错误 我用一个简单的方法捕获了错误try except指令 然后我处理错误 但是 OpenCV
  • 在 Swing 中使用计时器显示图片 5 秒

    我正在尝试使用以下方法为我的应用程序制作登录图片Timer 这个想法是 当用户打开应用程序时 他将看到一张图片 5 秒钟 然后应用程序将启动 我尝试过 正如你在方法中看到的shoutoff To change this license he
  • Facebook 的 Android ProGuard 设置

    我终于找到了为什么我的应用程序崩溃而构建的发布 ProGuard 确实从我的应用程序中剥离了代码 但我通过在 proguard android txt 在 sdk 中找到 中使用 keep 命令手动添加类来阻止这种情况 对于 Faceboo
  • 如何使用 NEST 在 Elasticsearch 中按索引获取所有文档?

    我想通过索引获取所有文档 我已经尝试过以下方法 var response client Search s gt s Index test MatchAll 响应返回 成功操作 但它没有命中任何文档 尽管该索引下有很多文档 To get al
  • npm 在 eslint 报告末尾抛出错误

    我在打字稿项目上运行 eslint 时遇到问题 我有以下 package json 我在其中编写了一个运行 eslint 的脚本 name ts tutorial version 1 0 0 description main index j
  • AngularJS中触发输入文件点击事件

    我正在尝试模拟 AngularJS 中文件输入的单击事件 我见过工作 jQuery 示例 http jsfiddle net fEBFp 1 但我不想使用 jQuery use strict angular module MyApp con