1. <div>
  2. <h2>{{vm.userInfo.number}} - {{vm.userInfo.name}}</h2>
  3. </div>
  1. 'use strict';
  2.  
  3. class CardTitleInformCtrl {
  4.  
  5. constructor() {
  6.  
  7. }
  8. }
  9.  
  10. function CardTitleInformDirective() {
  11. return {
  12. restrict: 'EA',
  13. scope: {},
  14. bindToController: {
  15. userInfo: '='
  16. },
  17. replace: true,
  18. template: require('./card-title-inform.html'),
  19. controller: CardTitleInformCtrl,
  20. controllerAs: 'vm'
  21. };
  22. }
  23.  
  24. export default (ngModule) => {
  25. ngModule.directive('comCardTitleInform', CardTitleInformDirective);
  26. };

Test:

  1. export default (ngModule) => {
  2. describe('card title inform test', () => {
  3.  
  4. var $scope, $compile, html, directiveName, directiveElm, controller;
  5. html = '<com-card-title-inform userInfo="userInfo"></com-card-title-inform>',
  6. directiveName = 'comCardTitleInform';
  7.  
  8. beforeEach(window.module(ngModule.name));
  9. beforeEach(inject(function(_$compile_, _$rootScope_){
  10. $scope = _$rootScope_.$new();
  11. $compile = _$compile_;
  12.  
  13. directiveElm = $compile(angular.element(html))($scope);
  14. controller = directiveElm.controller(directiveName);
  15. $scope.$digest();
  16. }));
  17.  
  18. it('should has an h2 element with text 888-888-888 - Wan', function () {
  19.  
  20. // Assign the data to the controller -- Because we use bindToController
  21. controller.userInfo = {
  22. name: "Wan",
  23. number: "888-888-888"
  24. };
  25. // ControllerAs as 'vm', assign controller to the $scope.vm
  26. $scope.vm = controller;
  27. // Make it work
  28. $scope.$digest();
  29.  
  30. expect(directiveElm.find('h2').text()).toEqual(controller.userInfo.number + ' - ' +controller.userInfo.name);
  31. });
  32. });
  33. };

[AngularJS + Unit Testing] Testing Directive's controller with bindToController, controllerAs and isolate scope的更多相关文章

  1. AngularJS入门心得1——directive和controller如何通信

    粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...

  2. [AngularJS Unit tesint] Testing keyboard event

    HTML: <div ng-focus="vm.onFocus(month)", aria-focus="{{vm.focus == month}}", ...

  3. [Unit Testing] AngularJS Unit Testing - Karma

    Install Karam: npm install -g karma npm install -g karma-cli Init Karam: karma init First test: 1. A ...

  4. [AngularJS + Unit Testing] Testing a component with requiring ngModel

    The component test: describe('The component test', () => { let component, $componentController, $ ...

  5. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  6. 我也谈 AngularJS 怎么使用Directive, Service, Controller

    原文地址:http://sunqianxiang.github.io/angularjs-zen-yao-shi-yong-directiveservicecontroller.html 其转自大漠穷 ...

  7. AngularJS:何时应该使用Directive、Controller、Service?

    AngularJS:何时应该使用Directive.Controller.Service? (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC ...

  8. AngularJS自定义Directive与controller的交互

    有时候,自定义的Directive中需要调用controller中的方法,即Directive与controller有一定的耦合度. 比如有如下的一个controller: app.controlle ...

  9. angularjs可交互的directive

    angularjs可交互的directive http://jsfiddle.net/revolunet/s4gm6/ directive开发上手练手,以注释的方式说明 html <body n ...

随机推荐

  1. 关于js的callback回调函数的理解

    回调函数的处理逻辑理解:所谓的回调函数处理逻辑,其实就是先将回调函数的代码 冻结(或者理解为闲置),接着将这个回调函数的代码放到回调函数管理器的队列里面. 待回调函数被触发调用的时候,对应的回调函数的 ...

  2. 一次 php nusoap 调试过程

    今天跟同事调用一个数据api ,用soap方式调用.本以为很简单的事情,却弄到了晚上. 因为有过调试经验,直接按照以往的过程直接部署,结果是错误. 1. 以为是调用方式错了,问了一下对接的同事,没问题 ...

  3. 修改虚拟机linux硬盘的大小

    一.概述 Ubuntu用了一段时间,系统已从原来的4G增长到8G,导致虚拟磁盘不够用,需要修改虚拟硬盘的大小. 但是,修改虚拟机硬盘的大小不像修改内存那么简单,操作一个滑动条就轻松搞定.要知道虚拟硬盘 ...

  4. mysql update from 子查询

    mssql 子查询更新 update log set uin= b.uinfrom log a,logs bwhere a.accountuin = b.accountuin mysql 不支持 up ...

  5. iOS:处理XML文件

    NSXMLParser是标准库类 Book.xml <?xml version="1.0" encoding="UTF-8"?> <!--Do ...

  6. 关于.NET的配置文件

    无论是exe文件还是dll文件,都可以添加App.config文件,里面设置配置信息.比如<appSettings></appSettings>之间,可以加入Key-Value ...

  7. 【关于JavaScript】常见表单用户名、密码不能为空

    在论坛等系统的用户注册功能中,如果用户忘记填写必填信息,如用户名.密码等,浏览器会弹出警告框,提示用户当前有未填信息. 这个典型的应用就是通过JavaScript实现的.如图所示是一个简单的用户注册页 ...

  8. [BZOJ 1559] [JSOI2009] 密码 【AC自动机DP】

    题目链接:BZOJ - 1559 题目分析 将给定的串建成AC自动机,然后在AC自动机上状压DP. 转移边就是Father -> Son 或 Now -> Fail. f[i][j][k] ...

  9. Java 字节码

    Java作为业界应用最为广泛的语言之一,深得众多软件厂商和开发者的推崇,更是被包括Oracle在内的众多JCP成员积极地推动发展.但是对于Java语言的深度理解和运用,毕竟是很少会有人涉及的话题.In ...

  10. C语言中.h和.c文件解析

    整理自C语言中.h和.c文件解析(很精彩) Part.1(林锐<高质量C/C++编程>) 通过头文件来调用库功能.在很多场合,源代码不便(或不准)向用户公布,只要向用户提供头文件和二进制的 ...