Angular 指令封装了 ng-change 的延迟

2024-02-29

我有一个搜索输入字段,其中的重新查询函数绑定到 ng-change。

 <input ng-model="search" ng-change="updateSearch()">

然而,这对每个角色来说都太快了。所以我最终做了很多这样的事情:

  $scope.updateSearch = function(){
    $timeout.cancel(searchDelay);
    searchDelay = $timeout(function(){
      $scope.requery($scope.search);
    },300);
  }

这样,请求仅在用户停止输入后 300 毫秒发出。有什么解决方案可以将其包装在指令中吗?


从 Angular 1.3 开始,这更容易实现,使用ng模型选项 https://docs.angularjs.org/api/ng/directive/ngModelOptions:

<input ng-model="search" ng-change="updateSearch()" ng-model-options="{debounce:3000}">

Syntax:  {debounce: Miliseconds}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 指令封装了 ng-change 的延迟 的相关文章

  • 带有绝对路径的角度js templateUrl

    在带有 url 的视频观看页面上 观看 video id 我有一个 ng 应用程序 该指令如下所示 app directive myApp function return restrict E templateUrl ng template
  • Angularjs $http 等待响应

    我是 javascript angularjs 的新手 我想在某些元素上完成鼠标悬停时显示引导弹出窗口 我为此创建了一个指令 function angular app app directive popOver window http fu
  • XmlHttpRequest CORS POST 发送时不带 cookie

    我有一个 Rails 服务为我的 AngularJS 前端应用程序返回数据 该服务配置为通过返回足够的标头来允许 CORS 请求 当我发出 GET 请求来接收数据时 会发送 CORS 标头 以及我之前在登录时收到的会话 cookie 您可以
  • 将安全的 Grafana 嵌入到 Web 应用程序中

    我想使用 AngularJS 将 Grafana 嵌入到我的 Web 应用程序中 目标是 当用户使用我的应用程序时 她应该能够单击按钮并加载 Grafana UI 就其本身而言 这是一项简单的任务 为此 我使用 apache 代理 Graf
  • ng-bootstrap ngbDropdown 在 Angular 4 中不起作用

    在我的 Angular 4 应用程序中 ng bootstrap 中的 ngbDropdown Element 不起作用 对于这种情况 我安装了以下 npm 模块 ng bootstrap ng bootstrap 1 0 0 alpha
  • 在 Karma+AngularJS 测试中加载模拟 JSON 文件

    我有一个 AngularJS 应用程序 使用 Karma Jasmine 设置了测试 我想测试一个函数 它接受一个大型 JSON 对象 将其转换为应用程序其余部分更容易使用的格式 然后返回转换后的对象 就是这样 对于我的测试 我希望您有单独
  • 如何使用 TypeScript 和 Angular 2 将插件添加到 ng2-ckeditor ?

    我正在尝试添加Justify插件到我的 ckeditor 但不幸的是我找不到任何关于如何将插件添加到 ng2 ckeditor 的信息 另外 我找不到任何应该添加插件的目录或配置文件 我正在使用 ng2 ckeditor1 0 6使用 Ty
  • D3.js折线图溢出边距

    我有 d3 js 折线图 它作为 angular js 应用程序的指令包含在内 动态添加的线和 xAxis 以及缩放线上的边距溢出 我必须在图的顶部为每条加载的线创建 Ox 轴 并具有 Ox 和 Oy 单独的缩放可能性 Oy 缩放工作正常
  • 如何识别 YouTube 播放器的音量变化

    我正在使用 angualr youtube embed 指令将 YouTube 播放器嵌入到我的 Angular Web 应用程序中 因为我必须识别播放和暂停以及音量变化事件 为了监听播放和暂停事件 我使用下面给出的代码 scope on
  • 如何使用 $http.get 获取 304 状态代码?

    如何使用 http get 获取 304 状态代码 http get menu json success function data status headers scope menu data console log status sho
  • 在 AngularJs 中动态更改按钮文本

    我正在使用 AngularJS CSS 和 HTML 这就是我想做的 根据某个函数的输出禁用按钮isPublished 我需要将鼠标悬停在按钮上 就像禁用按钮时 将鼠标悬停在文本上可能是 I m disabled 当它没有被禁用时 悬停在文
  • Angular JS 在调用新的 $http 之前取消 $http 调用

    在 Angular JS 1 1 5 中 您可以取消之前启动的 http 调用 这两个link1 https stackoverflow com questions 16962232 in angularjs how to stop ong
  • Angularjs 模式的复选框表现得很奇怪

    我有一个有角度的应用程序plunker http plnkr co edit rac8w9g8L0eX8mlXKuVn p preview 当我们单击该按钮时 它会打开一个包含项目列表的模式对话框 其中 2 项是根据复选框表输入中的条件进行
  • Swagger 生成 javascript-closure-angular-client

    我是 swagger 的新手 我从 swagger 的在线编辑器生成了一个 javascript 闭包角度客户端 它给了我一个 DefaultAPI js 和其他与我的对象定义匹配的 JS 文件 我在 swagger 文档和网上搜索了一种在
  • CORS 在 jquery 中工作正常,但在 angularjs 中不行

    我的服务器端是php mysql 我正在另一个域的 Web 服务中进行 Ajax 调用 其中启用了 的访问控制 var postUrl http logical brains com elance clone test login php
  • 使用 Angular 指令禁用文本选择

    我正在学习 JavaScript 和 AngularJS 我想使用 Angular Directive 禁用文本选择 我有该函数的 JavaScript 代码 function clearSelection if document sele
  • $resource.query 返回分割字符串(字符数组)而不是字符串

    我正在使用像下面这样的 Angular resource angular module app factory data function resource var Con resource api data update method P
  • 用户脚本 - 有没有办法将 jquery 代码注入 angularjs dom?

    所以我正在尝试为一个网站创建用户脚本 我无法更改网站的任何源代码 因为它不是我的 网站到处都使用 AngularJS 控制器 我研究了几天如何做到这一点 但没有成功 所以我尝试注入代码 nav after div test div 当我通过
  • Protractor e2e 测试表头和 , 标签

    我正在使用下表 我想测试每个标签 th td 标签 该标签中的文本以及该文本的计数 HTML 片段 table class table table striped tbody tr th b a Patient Id a b th th b
  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它

随机推荐