AngularJS辅助库browserTrigger用法示例

本文实例讲述了AngularJS辅助库browserTrigger用法。分享给大家供大家参考，具体如下：

今天推荐一款来自angularjs源码的单元测试辅助库browserTrigger，这是来自于ngScenario的一段代码。主要用户触发浏览器型行为更新ng中scope view model的值。

这是angularjs源码中单元测试的使用browserTrigger的实例：

it('should set the model to empty string when empty option is selected', function() {
  scope.robot = 'x';
  compile('<select ng-model="robot">' +
       '<option value="">--select--</option>' +
       '<option value="x">robot x</option>' +
       '<option value="y">robot y</option>' +
      '</select>');
  expect(element).toEqualSelect('', ['x'], 'y');
  browserTrigger(element.find('option').eq(0));
  expect(element).toEqualSelect([''], 'x', 'y');
  expect(scope.robot).toBe('');
});

在这段代码中给browserTrigger传入你希望选择的select option，则它会帮助你tigger change，选中当前option，更触发更新ng select的viewmodel。

在browserTrigger中还为我们做了很多其他输入框或者html控件的触发接口，同时也加入了浏览器的兼容性。使得我们的测试更加方便不用考虑浏览器兼容性或者不同的html控件trigger不同的事件去更新scope的值。

具体更多信息可参考ng的官方测试和browserTrigger源码。

希望本文所述对大家AngularJS程序设计有所帮助。

赞 (0)

相关推荐

  • 在JavaScript的AngularJS库中进行单元测试的方法

    在JavaScript的AngularJS库中进行单元测试的方法

    开发者们都一致认为单元测试在开发项目中十分有好处.它们帮助你保证代码的质量,从而确保更稳定的研发,即使需要重构时也更有信心.  测试驱动开发流程图 AngularJS的代码声称其较高的可测性确实是合理的.单单文档中列出端对端的测试实例就能说明.就像AngularJS这样的项目虽然都说单元测试很简单但真正做好却不容易.即使官方文档中以提供了详尽的实例,但在我的实际应用中却还是很有挑战.这里我就简单示范一下我是怎么操作的吧. Instant Karma Karma 是来Angular团队针对Java

  • 利用JavaScript的AngularJS库制作电子名片的方法

    利用JavaScript的AngularJS库制作电子名片的方法

    简介 在这个例子中,我引用了包括AngularJS在内的一些JavaScript库,实现了一个很简单的名片生成器. 尽管在这个小应用中,AngularJS库相较于其他JavaScript库来说做的事不多,然而,这个小而强大的AngularJS却是该应用的全部灵感之源. 背景 在该应用中,我们需要做些简单工作.首先,我们需要用CSS设计名片.然后,我们需要让用户实时的输入和编辑数据,这个地方AngularJS就不可或缺了.再然后,我们需要将名片的HTML div容器转化为canvas画布,并以PN

  • 使用AngularJS 应用访问 Android 手机的图片库

    使用AngularJS 应用访问 Android 手机的图片库

    Download angularjs.zip- 4.5 KB 介绍 这篇文章来说明如何使用AngularJs调用android Apps暴露的REST APIS来访问图像库. 背景 Android和IOS 有很多远程访问的app,但是开发者缺少远程访问手机特征的API.因此,myMoKit的开发是用来填补软件解决方案的缺陷的. 使用代码 使用代码是很简单的,你只要通过web URL 引用myMoKit 服务,你就可以看见所有暴露的REST API了 这些在手机里面的API列表和流媒体.通过Ang

  • AngularJS实现分页显示数据库信息

    AngularJS实现分页显示数据库信息

    接着第一篇<>AngularJS内建服务$location及其功能详解>,进行学习 Section 2:实现分页显示效果 那么再隐身一下,通过location的setter方法设置当前的url信息.在这里为了能够让演示看到更好的效果,在这个比较完整的实例中,我引入了angularJS的多路由技术.嵌套的控制器之间传递数据.scope的继承. http通信.内链接传递变量等. 首先建立一个首页模板 <!DOCTYPE html> <html ng-app="tu

  • Angular-Touch库用法示例

    本文实例讲述了Angular-Touch库用法.分享给大家供大家参考,具体如下: Angular-touch库用的不多,网上的例子也不多.写个触屏滑动的事件. 先在页面上弄个div <div id="content" align="center" ng-app="imageApp" image-controller=""> <p style="position: absolute; width: 1

  • 使用JavaScript的AngularJS库编写hello world的方法

    本文展示了AngularJS框架实现的hello world代码示例. 如下是一些你在看Hello World 示例和接下来的代码示例时需要重点关注的方面. ng-app, ng-controller, ng-model 指令 带有两个大括弧的模板 步骤 1: 在<Head>部分包含Angular Javascript 将下面的代码包含入 <head></head> 中,以引入 Angularjs javascript 文件. 可以用如下写法从 Google 管理的库

  • Angular2中Bootstrap界面库ng-bootstrap详解

    Angular2中Bootstrap界面库ng-bootstrap详解

    准备 Angular 2 环境 ng-bootstrap 是基于 Angular 2 的, 因此需要先准备 Angular 2 的环境. 使用 ng-bootstrap 下载 ng-bootstrap ng-bootstrap 使用 bootstrap 4.0 alpha2 , 因此需要先下载 bootstrap , 推荐使用 npm 包的形式: npm install bootstrap@4.0.0-alpha.2 --save 接着下载 ng-bootstrap , 同样使用 npm 包的形

  • AngularJS辅助库browserTrigger用法示例

    本文实例讲述了AngularJS辅助库browserTrigger用法.分享给大家供大家参考,具体如下: 今天推荐一款来自angularjs源码的单元测试辅助库browserTrigger,这是来自于ngScenario的一段代码.主要用户触发浏览器型行为更新ng中scope view model的值. 这是angularjs源码中单元测试的使用browserTrigger的实例: it('should set the model to empty string when empty optio

  • AngularJS路由Ui-router模块用法示例

    本文实例讲述了AngularJS路由Ui-router模块用法.分享给大家供大家参考,具体如下: 由于某些设计原因,AngularJS原生的路由模块有一些缺点,比如说不支持view的嵌套等,所以有许多社区开始自己设计路由模块,最有代表性的就是ui-route了. ui-route是一个功能强大的路由模块,它在原生的ng-route模块上加强了其他方面的功能. 现在就开始做几个DEMO接触一下ui-route. <!--初始页面--> <!doctype html> <meta

  • thinkPHP框架单元测试库tpunit用法示例

    本文实例讲述了thinkPHP框架单元测试库tpunit用法.分享给大家供大家参考,具体如下: thinkphp本身并没有提供相应的单元测试支持,所以这里介绍一个可以对tp进行单元测试的库tpunit. Tpunit这个库是依赖于phpunit的,其特点是易用.方便和非入侵式. 使用TPUNIT很简单,只需要定义一个路径常量和导入要被测试的文件即可. Home模块下有个控制器如下: namespace Home\Controller; use Think\Controller; class In

  • Python Requests库基本用法示例

    本文实例讲述了Python Requests库基本用法.分享给大家供大家参考,具体如下: requests是python的一个http client库,提供了一套简捷的API供开发者使用.下面简单介绍一下其安装和使用.这里是官方文档. 0 安装 pip install requests 1 发送请求 r=requests.get('https://www.baidu.com') print r.status_code,r.text r=requests.post('http://httpbin.

  • 在ASP.NET MVC项目中使用RequireJS库的用法示例

    RequireJS 是一个前端模块化开发的流行工具,本身是一个Javascript的库文件,即require.js . RequireJs的主要功能: (1)实现js文件的异步加载,避免网页失去响应: (2)管理模块之间的依赖性,便于代码的编写和维护. 前端模块化开发现在有好多的工具,大体上分为两类,一类是像dojo之类的高大全,dojo v1.8之后已经内置了模块化开发组件:另一类是像require.js,sea.js 这种专心做模块化开发的工具. 从模块化划分的规则来区分,主要分为AMD.C

  • Python定时库APScheduler的原理以及用法示例

    Python定时库APScheduler的原理以及用法示例

    目录 1. APScheduler简介 2. APScheduler组件 2.1. APScheduler中几个重要的概念 2.1.1. Job 作业 2.1.2. Trigger 触发器 2.1.3. Executor 执行器 2.1.4. Jobstore 作业存储 2.1.5. Event 事件 2.1.6. Listener 监听事件 2.1.7. Scheduler 调度器 2.2. Scheduler工作流程图 2.2.1. Scheduler添加job流程 2.2.2 Schedu

  • Python标准库中的logging用法示例详解

    Python标准库中的logging用法示例详解

    目录 1.logging的介绍 2.简单用法示例 3.日志级别 4.打印格式的各个参数 5.日志输出到指定文件 6.日志回滚(按照文件大小滚动) 7.日志回滚(按照时间滚动) 1.logging的介绍 logging是Python标准库中记录常用的记录日志库,通过logging模块存储各种格式的日志,主要用于输出运行日志,可以设置输出日志的等级.日志保存路径.日志文件回滚等. 2.简单用法示例 首先创建一个logger.py的文件,其里面的代码如下所示: import logging # 1.创

  • Go编程库Sync.Pool用法示例详解

    目录 场景 用法 创建 GET & PUT 优化 Log 函数 性能测试 场景 go 如果频繁地创建.销毁对象(比如 http 服务的 json 对象,日志内容等),会对 GC 造成压力.比如下面的 Log 函数,在高并发情况下,需要频繁地创建和销毁 buffer. func Log(w io.Writer, key, val string) { b := new(bytes.Buffer) // 按一定的格式打印日志,这一段不是重点 b.WriteString(time.Now().UTC()

  • AngularJS入门教程之多视图切换用法示例

    AngularJS入门教程之多视图切换用法示例

    本文实例讲述了AngularJS多视图切换用法.分享给大家供大家参考,具体如下: 在AngularJS应用中,我们可以將html碎片写在一个单独的文件中,然后在其他页面中將该段碎片加载进来.如果有多个碎片文件,我们还可以在控制器中根据用户的操作动态的加载不同的碎片,从而达到切换视图的效果. 先来看看笔者写好的一个案例吧: 这两首词实际上是两个html碎片,分别写在page1.html和page2.html.下面是这两个文件的内容: <!--page1.html内容--> <div>

  • AngularJS入门教程之表单校验用法示例

    AngularJS入门教程之表单校验用法示例

    本文实例讲述了AngularJS表单校验用法.分享给大家供大家参考,具体如下: 表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面的校验.如果对HTTP协议比较熟,甚至还可以在程序中手动构造一段HTTP请求发到服务器,所以服务器端的数据校验绝对是必不可少的. WEB前端数据校验的意义在于改善用户体验,用户不用等到將数据提交到服务器后才知道哪些数据是

随机推荐