走进AngularJs(五)自定义指令----（下） - 吕大豹 - 推酷
走进AngularJs(五)自定义指令----（下） - 吕大豹
自定义指令学习有段时间了，学了些纸上谈兵的东西，还没有真正的写个指令出来呢。。。所以，随着学习的接近尾声，本篇除了介绍剩余的几个参数外，还将动手结合使用各参数，写个真正能用的指令出来玩玩。
我们在自定义指令（上）中，写了一个简单的&say-hello&&/say-hello&，能够跟美女打招呼。但是看看人家ng内置的指令，都是这么用的：ng-model=”m”，ng-repeat=”a in array”，不单单是作为属性，还可以赋值给它，与作用域中的一个变量绑定好，内容就可以动态变化了。假如我们的sayHello可以这样用：&say-hello speak=”content”&美女&/say-hello&，把要对美女说的话写在一个变量content中，然后只要在controller中修改content的值，页面就可以显示对美女说的不同的话。这样就灵活多了，不至于见了美女只会说一句hello，然后就没有然后了。
为了实现这样的功能，我们需要使用scope参数，下面来介绍一下。
使用scope为指令划分作用域
顾名思义，scope肯定是跟作用域有关的一个参数，它的作用是描述指令与父作用域的关系，这个父作用域是指什么呢？想象一下我们使用指令的场景，页面结构应该是这个样子：
&div ng-controller=&testC&&
&say-hello speak=&content&&美女&/say-hello&
外层肯定会有一个controller，而在controller的定义中大体是这个样子：
var app = angular.module('MyApp', [], function(){console.log('here')});
app.controller('testC',function($scope){
$scope.content = '今天天气真好！';
所谓sayHello的父作用域就是这个名叫testC的控制器所管辖的范围，指令与父作用域的关系可以有如下取值：
默认值。使用父作用域作为自己的作用域
新建一个作用域，该作用域继承父作用域
与父作用域隔离，并指定可以从父作用域访问的变量
乍一看取值为false和true好像没什么区别，因为取值为true时会继承父作用域，即父作用域中的任何变量都可以访问到，效果跟直接使用父作用域差不多。但细细一想还是有区别的，有了自己的作用域后就可以在里面定义自己的东西，与跟父作用域混在一起是有本质上的区别。好比是父亲的钱你想花多少花多少，可你自己挣的钱父亲能花多少就不好说了。你若想看这两个作用域的区别，可以在link函数中打印出来看看，还记得link函数中可以访问到scope吧。
最有用的还是取值为第三种，一个对象，可以用键值来显式的指明要从父作用域中使用属性的方式。当scope值为一个对象时，我们便建立了一个与父层隔离的作用域，不过也不是完全隔离，我们可以手工搭一座桥梁，并放行某些参数。我们要实现对美女说各种话就得靠这个。使用起来像这样：
attributeName1: 'BINDING_STRATEGY',
attributeName2: 'BINDING_STRATEGY',...
键为属性名称，值为绑定策略。等等！啥叫绑定策略？最讨厌冒新名词却不解释的行为！别急，听我慢慢道来。
先说属性名称吧，你是不是认为这个attributeName1就是父作用域中的某个变量名称？错！其实这个属性名称是指令自己的模板中要使用的一个名称，并不对应父作用域中的变量。好难懂啊。。。可能这么说太不负责任了，稍后的例子中我们来说明。再来看绑定策略，它的取值按照如下的规则：
传递一个字符串作为属性的值.
使用父作用域中的一个属性，绑定数据到指令的属性中.
使用父作用域中的一个函数,可以在指令中调用
getName : ‘&getUserName’
总之就是用符号前缀来说明如何为指令传值。你肯定迫不及待要看例子了，我们结合例子看一下，小二，上栗子~
我想要实现上面想像的跟美女多说点话的功能，即我们给sayHello指令加一个属性，通过给属性赋值来动态改变说话的内容。主要代码如下：
app.controller('testC',function($scope){
$scope.content = '今天天气真好！';
app.directive('sayHello',function(){
restrict : 'E',
template : '&div&hello，&b ng-transclude&&/b&,{{cont}}&/div&',
replace : true,
transclude : true,
cont : '=speak'
然后在模板中，我们如下使用指令：
&div ng-controller=&testC&&
&say-hello speak=&content&&美女&/say-hello&
① 指令被编译的时候会扫描到template中的{{cont}}，发现是一个表达式；
② 查找scope中的规则：通过speak与父作用域绑定，方式是传递父作用域中的属性；
③ speak与父作用域中的content属性绑定，找到它的值“今天天气真好！”
④ 将content的值显示在模板中
这样我们说话的内容cont就跟父作用域绑定到了一其，如果动态修改父作用域的content的值，页面上的内容就会跟着改变，正如你点击“换句话”所看到的一样。
这个例子也太小儿科了吧！简单虽简单，但可以让我们理解清楚，为了检验你是不是真的明白了，可以思考一下如何修改指令定义，能让sayHello以如下两种方式使用：
&span say-hello speak=&content&&美女&/span&
&span say-hello=&content& &美女&/span&
答案我就不说了，简单的很。下面有更重要的事情要做，我们说好了要写一个真正能用的东西来着。接下来就结合所学到的东西来写一个折叠菜单，即点击可展开，再点击一次就收缩回去的菜单，（偷偷告诉你，这个例子其实是从
上抄来的~）。
控制器及指令的代码如下：（为了不让文章太长，我后面的代码要折叠起来了，请自行点开）
app.controller('testC',function($scope){
$scope.title = '个人简介';
$scope.text = '大家好，我是一名前端工程师，我正在研究AngularJs，欢迎大家与我交流，Email:lvxiaobao_';
app.directive('expander',function(){
restrict : 'E',
templateUrl : 'expanderTemp.html',
replace : true,
transclude : true,
mytitle : '=etitle'
link : function(scope,element,attris){
scope.showText = false;
scope.toggleText = function(){
scope.showText = ! scope.showT
&script type=&text/ng-template& id=&expanderTemp.html&&
class=&mybox&&
&div class=&mytitle& ng-click=&toggleText()&&
{{mytitle}}
&div ng-transclude ng-show=&showText&&
&div ng-controller=&testC&&
&expander etitle=&title&&{{text}}&/expander&
还是比较容易看懂的，我只做一点必要的解释。首先我们定义模板的时候使用了ng的一种定义方式&script type=”text/ng-template” id=&expanderTemp.html&&，在指令中就可以用templateUrl根据这个id来找到模板。指令中的{{mytitle}}表达式由scope参数指定从etitle传递，etitle指向了父作用域中的title。为了实现点击标题能够展开收缩内容，我们把这部分逻辑放在了link函数中，link函数可以访问到指令的作用域，我们定义showText属性来表示内容部分的显隐，定义toggleText函数来进行控制，然后在模板中绑定好。 如果把showText和toggleText定义在controller中，作为$scope的属性呢？显然是不行的，这就是隔离作用域的意义所在，父作用域中的东西除了title之外通通被屏蔽。
上面的例子中，scope参数使用了=号来指定获取属性的类型为父作用域的属性，如果我们想在指令中使用父作用域中的函数，使用&符号即可，是同样的原理。
以上是本人对scope的理解，另外有一篇文章对Angular作用域的解释也比较详细，有兴趣可以参考
使用controller和require进行指令间通信
使用指令来定义一个ui组件是个不错的想法，首先使用起来方便，只需要一个标签或者属性就可以了，其次是可复用性高，通过controller可以动态控制ui组件的内容，而且拥有双向绑定的能力。当我们想做的组件稍微复杂一点，就不是一个指令可以搞定的了，就需要指令与指令的协作才可以完成，这就需要进行指令间通信。
想一下我们进行模块化开发的时候的原理，一个模块暴露（exports）对外的接口，另外一个模块引用（require）它，便可以使用它所提供的服务了。ng的指令间协作也是这个原理，这也正是自定义指令时controller参数和require参数的作用。
controller参数用于定义指令对外提供的接口，它的写法如下：
controller: function controllerConstructor($scope, $element, $attrs, $transclude)
它是一个构造器函数，将来可以构造出一个实例传给引用它的指令。为什么叫controller（控制器）呢？其实就是告诉引用它的指令，你可以控制我。至于可以控制那些东西呢，就需要在函数体中进行定义了。先看controller可以使用的参数，作用域、节点、节点的属性、节点内容的迁移，这些都可以通过依赖注入被传进来，所以你可以根据需要只写要用的参数。关于如何对外暴露接口，我们在下面的例子来说明。
require参数便是用来指明需要依赖的其他指令，它的值是一个字符串，就是所依赖的指令的名字，这样框架就能按照你指定的名字来从对应的指令上面寻找定义好的controller了。不过还稍稍有点特别的地方，为了让框架寻找的时候更轻松些，我们可以在名字前面加个小小的前缀：^，表示从父节点上寻找，使用起来像这样：require : ‘^directiveName’，如果不加，$compile服务只会从节点本身寻找。另外还可以使用前缀：？，此前缀将告诉$compile服务，如果所需的controller没找到，不要抛出异常。
所需要了解的知识点就这些，接下来是例子时间，依旧是从书上抄来的一个例子，我们要做的是一个手风琴菜单，就是多个折叠菜单并列在一起，此例子用来展示指令间的通信再合适不过。
首先我们需要定义外层的一个结构，起名为accordion，代码如下：
app.directive('accordion',function(){
restrict : 'E',
template : '&div ng-transclude&&/div&',
replace : true,
transclude : true,
controller :function(){
var expanders = [];
this.gotOpended = function(selectedExpander){
angular.forEach(expanders,function(e){
if(selectedExpander != e){
e.showText = false;
this.addExpander = function(e){
expanders.push(e);
需要解释的只有controller中的代码，我们定义了一个折叠菜单数组expanders，并且通过this关键字来对外暴露接口，提供两个方法。gotOpended接受一个selectExpander参数用来修改数组中对应expander的showText属性值，从而实现对各个子菜单的显隐控制。addExpander方法对外提供向expanders数组增加元素的接口，这样在子菜单的指令中，便可以调用它把自身加入到accordion中。
看一下我们的expander需要做怎样的修改呢：
app.directive('expander',function(){
restrict : 'E',
templateUrl : 'expanderTemp.html',
replace : true,
transclude : true,
require : '^?accordion',
title : '=etitle'
link : function(scope,element,attris,accordionController){
scope.showText = false;
accordionController.addExpander(scope);
scope.toggleText = function(){
scope.showText = ! scope.showT
accordionController.gotOpended(scope);
首先使用require参数引入所需的accordion指令，添加?^前缀表示从父节点查找并且失败后不抛出异常。然后便可以在link函数中使用已经注入好的accordionController了，调用addExpander方法将自己的作用域作为参数传入，以供accordionController访问其属性。然后在toggleText方法中，除了要把自己的showText修改以外，还要调用accordionController的gotOpended方法通知父层指令把其他菜单给收缩起来。
指令定义好后，我们就可以使用了，使用起来如下：
&accordion&
　　&expander ng-repeat=&expander in expanders& etitle=&expander.title&&{{expander.text}}&/expander&
&/accordion&
外层使用了accordion指令，内层使用expander指令，并且在expander上用ng-repeat循环输出子菜单。请注意这里遍历的数组expanders可不是accordion中定义的那个expanders，如果你这么认为了，说明还是对作用域不够了解。此expanders是ng-repeat的值，它是在外层controller中的，所以，在testC中，我们需要添加如下数据：
$scope.expanders = [
{title: '个人简介',
text: '大家好，我是一名前端工程师，我正在研究AngularJs，欢迎大家与我交流，Email:lvxiaobao_'},
{title: '我的爱好',
text: '运动类：篮球、足球、乒乓球。
电脑类：前端技术、打DOTA。
其他类：欣赏美女'},
{title: '性格及工作',
text: '追求完美主义的处女座极品男人就是我啦~严重的代码洁癖以及对垃圾代码的零容忍！希望通过自己的努力进入理想的公司工作。'}
这下就都全乎了，试一下我们的accordion组件是不是可以正常使用了呢：
{{expander.text}}
理解了其中的道理之后，使用起来就可以得心应手了，我也将在以后的实践中尝试编写更加复杂的组件，此小例子就当是抛砖引玉了~
又到了总结时间，到此为止自定义指令的学习就告一段落了，但我相信相关的知识肯定远远不止这些，真正要将指令在项目中用好，还需要理解指令与ng的其他机制如何相互作用，还需更加深入的了解ng的指令机制等。所以学与用的转变还需要实践的检验。
撰写博客使我的学习进度变的异常缓慢，要加油了！
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致angular中控制器之间的传值该怎么实现?
答主老司机们的回答都是经典, 有一个回答有提到了angualr的编写规范.&br&我们的项目在按照规范写了之后真的在各方面都变得嗨了很多.&br&这是规范的链接.
拿出来大家去看看&br&&a href=&///?target=https%3A///johnpapa/angular-styleguide/blob/master/i18n/zh-CN.md& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&angular-styleguide/zh-CN.md at master · johnpapa/angular-styleguide · GitHub&i class=&icon-external&&&/i&&/a&&br&-------------更新线,下为原文----------------------&br&&br&&br&&img src=&/d0733c41fd_b.png& data-rawwidth=&922& data-rawheight=&626& class=&origin_image zh-lightbox-thumb& width=&922& data-original=&/d0733c41fd_r.png&&&br&有找到这么一个解决方案.&br&&a href=&///?target=http%3A///whitewolf/archive//3024843.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Angularjs Controller 间通信机制&i class=&icon-external&&&/i&&/a&&br&这种方案如果父controller之间甚至父的父controller之间仍是兄弟关系如同这个案例这样..还有什么方案推荐么...&br&&br&&br&其实还有一个想问的 就是有关于$scope.$id&br&&br&还有 现在也获取到了每个controller 的 $scope.$id($scope1的$id 为15,$scope2 的$id为22), 能有什么办法 在controller2中通过15 这个$scope1的$id从而获取到$scope1 这个对象呢?&br&&br&画图不易 T.T &br&老司机们快来答题 -3-
答主老司机们的回答都是经典, 有一个回答有提到了angualr的编写规范.我们的项目在按照规范写了之后真的在各方面都变得嗨了很多.这是规范的链接.
拿出来大家去看看-------------更新线,下为原文----------------------…
按投票排序
每个controller都会有自己的scope，所有的scope都是属于 $rootScope的子或者子的子...那么问题就好解决了，通过
$rootScope.$broadcast 广播的事件每个controller都能收到事件
上面的说的基本上很全了，我再总结补充一下吧。通过Angular的话可以通过下面四种方法1、event这里可以有两种方式，一种是$scope.$emit，然后通过监听$rootScope的事件获取参数；另一种是$rootScope.$broadcast，通过监听$scope的事件获取参数。这两种方法在最新版本的Angular中已经没有性能区别了，主要就是事件发送的方向不同，可以按实际情况选择。2、service可以创建一个专用的事件Service，也可以按照业务逻辑切分，将数据存储在相应的Service中，因为已经有人提过了就不赘述了。3、$rootScope这个方法可能会比较dirty一点，胜在方便，也就是把数据存在$rootScope中，这样各个子$scope都可以调用，不过需要注意一下生命周期4、直接使用$scope.$$nextSibling及类似的属性类似的还有$scope.$parent。这个方法的缺点就更多了，官方不推荐使用任何$$开头的属性，既增加了耦合，又需要处理异步的问题，而且scope的顺序也不是固定的。不推荐另外就是通过本地存储、全局变量或者现代浏览器的postMessage来传递参数了，除非特殊情况，请避免这类方式。最后这个代码风格可以参考一下，对代码的整体组织可以有些帮助以上参考
如其他答案，可以用event。另外，我的经验是，尽量不要用event传数据。应该建立一个service来保存数据，并且设置相应getter/setter，具体如下：每个controller依赖service, call service.setter(...)统一的service.setter(...)在改完数据后可以$emit('data-updated')每个controller里$on('data-updated', function(){
$scope.data = service.getData() })
看我这个栗子的最后两个选项卡然后，原理在这里：
直接建一个service，不要用什么事件，项目一大N多个controller或者N久再去维护会玩死你，service里提供存和取的方法，简单明了，API容易查找和修改，调试也方便无混乱的依赖关系
已有帐号？
无法登录？
社交帐号登录1.使用url传值
页面间，可以使用url传值，例如：
&a ng-click=&onGoDetail(y.id);&&&img ng-src=&imgurl/1.jpg& /&&/a&
$scope.onGotDetail=function(pNo)
window.location.href=&detail.html?pNo=&+pNo;
};url如使用这样的方法可以在跳转页面同时传递一个url上面的pNo=123参数给目的页面。
对于多个参数：window.location.href=&detail.html?id=&+id+&&key=&+
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：3207次
排名：千里之外angular中控制器之间的传值该怎么实现_百度知道
angular中控制器之间的传值该怎么实现
这个方法的缺点就更多了，然后通过监听$rootScope的事件获取参数，而且scope的顺序也不是固定的，一种是$scope，主要就是事件发送的方向不同.
$$nextSibling及类似的属性 类似的还有$scope，这样各个子$scope都可以调用、直接使用$scope通过Angular的话可以通过下面四种方法
1，通过监听$scope的事件获取参数，请避免这类方式，也可以按照业务逻辑切分。不推荐
另外就是通过本地存储，可以按实际情况选择，也就是把数据存在$rootScope中.$emit，胜在方便、service 可以创建一个专用的事件Service，又需要处理异步的问题、全局变量或者现代浏览器的postMessage来传递参数了。 这两种方法在最新版本的Angular中已经没有性能区别了.hbbz08；另一种是$rootScope，除非特殊情况.$parent。
最后 johnpapa&#47，官方不推荐使用任何$$开头的属性，不过需要注意一下生命周期
4，因为已经有人提过了就不赘述了.$broadcast，将数据存储在相应的Service中.hbbz08;angular-styleguide · GitHub 这个代码风格可以参考一下://www，既增加了耦合、event 这里可以有两种方式
知道智能回答机器人
我是知道站内的人工智能，可高效智能地为您解答问题。很高兴为您服务。
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁如何在 AngularJS 中对控制器进行单元测试
如何在 AngularJS 中对控制器进行单元测试
　　开发者们都一致认为单元测试在开发项目中十分有好处。它们帮助你保证代码的质量，从而确保更稳定的研发，即使需要重构时也更有信心。
　　测试驱动开发流程图
　　AngularJS的代码声称其较高的可测性确实是合理的。单单文档中列出端对端的测试实例就能说明。就像AngularJS这样的项目虽然都说单元测试很简单但真正做好却不容易。即使官方文档中以提供了详尽的实例，但在我的实际应用中却还是很有挑战。这里我就简单示范一下我是怎么操作的吧.
Instant Karma
　　Karma 是来Angular团队针对JavaScript开发的一个测试运行框架。它很方便的实现了自动执行测试任务从而替代了繁琐的手工操作（好比回归测试集或是加载目标测试的依赖关系）Karma 和Angular的协作就好比花生酱和果冻.
　　只需要在Karma中定义好配置文件启动它，接下来它就会在预期的测试环境下的自动执行测试用例。你可以在配置文件中制定相关的测试环境。angular-seed,是我强烈推荐的可以快速实施的方案。在我近期的项目中Karma 的配置如下：
　　module.exports = function(config) {& & config.set({& & & & basePath: '../',
　　files: [& & & & & & 'app/lib/angular/angular.js',& & & & & & 'app/lib/angular/angular-*.js',& & & & & & 'app/js/**/*.js',& & & & & & 'test/lib/recaptcha/recaptcha_ajax.js',& & & & & & 'test/lib/angular/angular-mocks.js',& & & & & & 'test/unit/**/*.js'& & & & ],
　　exclude: [& & & & & & 'app/lib/angular/angular-loader.js',& & & & & & 'app/lib/angular/*.min.js',& & & & & & 'app/lib/angular/angular-scenario.js'& & & & ],
　　autoWatch: true,
　　frameworks: ['jasmine'],
　　browsers: ['PhantomJS'],
　　plugins: [& & & & & & 'karma-junit-reporter',& & & & & & 'karma-chrome-launcher',& & & & & & 'karma-firefox-launcher',& & & & & & 'karma-jasmine',& & & & & & 'karma-phantomjs-launcher'& & & & ],
　　junitReporter: {& & & & & & outputFile: 'test_out/unit.xml',& & & & & & suite: 'unit'& & & & }
　　})}　　这个跟angular-seed的默认配置类似只不过有以下几点不同：
　　需要更改浏览器从Chrome 转到PhantomJS, 这样每次跳转时无需再打开新的浏览器窗口，但在OSX系统会有窗口延迟。所以这个插件还有浏览器设置都做了更改。
　　由于我的应用需要引用Google的Recaptcha服务因此添加了依赖的recaptcha_ajax.js小文件。这个小配置就像在Karma的配置文件中添加一行代码那么简单。
　　autoWatch确实是个很酷的设置，它会让Karma在有文件更改时自动回归你的测试用例。你可以这样安装Karma:
　　npm install karma
　　angular-seed 提供了一个简单的脚本inscripts/test.sh去触发Karma的测试。
　　用Jasmine设计测试用例
　　当使用Jasmine----一种行为驱动开发模式的JavaScript测试框架为Angular设计单元测试用例时大部分的资源都已可获取。
　　这也就是我接下来要说的话题。
　　如果你要对AngularJS controller做单元测试可以利用Angular的依赖注入dependency injection功能导入测试场景中controller需要的服务版本还能同时检查预期的结果是否正确。例如，我定义了这个controller去高亮需要导航去的那个页签：
　　ntroller('NavCtrl', function($scope, $location) {& & $scope.isActive = function(route) {& & & & return route === $location.path();& & };})
　　如果想要测试isActive方法，我会怎么做呢？我将检查$locationservice 变量是否返回了预期值，方法返回的是否预期值。因此在我们的测试说明中我们会定义好局部变量保存测试过程中需要的controlled版本并在需要时注入到对应的controller当中。然后在实际的测试用例中我们会加入断言来验证实际的结果是否正确。整个过程如下：
　　describe('NavCtrl', function() {& & var $scope, $location, $rootScope, createC
　　beforeEach(inject(function($injector) {& & & & $location = $injector.get('$location');& & & & $rootScope = $injector.get('$rootScope');& & & & $scope = $rootScope.$new();
　　var $controller = $injector.get('$controller');
　　createController = function() {& & & & & & return $controller('NavCtrl', {& & & & & & & & '$scope': $scope& & & & & & });& & & & };& & }));
　　it('should have a method to check if the path is active', function() {& & & & var controller = createController();& & & & $location.path('/about');& & & & expect($location.path()).toBe('/about');& & & & expect($scope.isActive('/about')).toBe(true);& & & & expect($scope.isActive('/contact')).toBe(false);& & });});
　　使用整个基本的结构，你就能设计各种类型的测试。由于我们的测试场景使用了本地的环境来调用controller,你也可以多加上一些属性接着执行一个方法清除这些属性，然后再验证一下属性到底有没有被清除。$httpBackendIs Cool
　　那么要是你在调用$httpservice请求或是发送数据到服务端呢？还好，Angular提供了一种
　　$httpBackend的mock方法。这样的话，你就能自定义服务端的响应内容，又或是确保服务端的响应结果能和单元测试中的预期保持一致。
　　具体细节如下：
　　describe('MainCtrl', function() {& & var $scope, $rootScope, $httpBackend, $timeout, createC& & beforeEach(inject(function($injector) {& & & & $timeout = $injector.get('$timeout');& & & & $httpBackend = $injector.get('$httpBackend');& & & & $rootScope = $injector.get('$rootScope');& & & & $scope = $rootScope.$new();
　　var $controller = $injector.get('$controller');
　　createController = function() {& & & & & & return $controller('MainCtrl', {& & & & & & & & '$scope': $scope& & & & & & });& & & & };& & }));
　　afterEach(function() {& & & & $();& & & & $();& & });
　　it('should run the Test to get the link data from the go backend', function() {& & & & var controller = createController();& & & & $scope.urlToScrape = '';
　　$('GET', '/slurp?urlToScrape=')& & & & & & .respond({& & & & & & & & "success": true,& & & & & & & & "links": ["", "", ""]& & & & & & });
　　// have to use $apply to trigger the $digest which will& & & & // take care of the HTTP request& & & & $scope.$apply(function() {& & & & & & $scope.runTest();& & & & });
　　expect($scope.parseOriginalUrlStatus).toEqual('calling');
　　expect($scope.retrievedUrls).toEqual(["", "", ""]);& & & & expect($scope.parseOriginalUrlStatus).toEqual('waiting');& & & & expect($scope.doneScrapingOriginalUrl).toEqual(true);& & });});
　　正如你所见，beforeEach call其实都很类似，唯一不同的是我们是从injector获取$httpBackend而并非直接获取。即使如此，创建不同的测试时还会有一些明显的不同之处。对初学者来说，会有一个afterEachcall 方法来确保$httpBackend在每次用例执行后不会有明显的异常请求。如果你观察一下测试场景的设置和$httpBackend方法的应用就会会发现有那么几点不是那么直观的。
　　实际上调用$httpBackend的方法也算是简单明了但还不够&&我们还得在传值给$scope.$apply的方法中把调用封装到实际测试中的$scope.runTest方法上。这样在$digest被触发后才能处理HTTP请求。而如你所见直到我们调用$()方法后$httpBackend才会被解析，这也就保证了我们能在调用过程中去验证返回的结果是否正确（在上面的示例中，controller的$scope.parseOriginalUrlStatusproperty属性将被传递给调用者，我们也因此能实时监控）
　　接下来的几行代码都是在调用过程中检测$scopethat属性的断言。很酷吧？
　　提示：在某些单元测试中，用户习惯把没有$的范围标记为变量。这个在Angular文档中并没有强制要求或是过分强调，只是我在使用中为了提高可读性和一致性才使用$scopelike这种方式。
　　也许这就是我做起来对其他人而言只是自然而然能做到的事情之一，但是学习使用Angular编写单元测试一开始对我而言确实是相当痛苦的。我发现自己对如何开始的理解大多来自互联网上各种博客文章和资源的拼拼凑凑，没有真正一致或明确的最佳实践，而是通过自然而然随意的选择。我想针对我最终得到的成果提供一些文档，以帮助那些也许还在坑里面挣扎的其他人，毕竟他们只是想要编写代码而已，而非不得不去了解Angular和Jasmine中所有的怪异特性和独特用法。因此我希望这篇文章能对你有些许帮助。
H3C认证Java认证Oracle认证
基础英语软考英语项目管理英语职场英语
.NETPowerBuilderWeb开发游戏开发Perl
二级模拟试题一级模拟试题一级考试经验四级考试资料
港口与航道工程建设工程法规及相关知识建设工程经济考试大纲矿业工程市政公用工程通信与广电工程
操作系统汇编语言计算机系统结构人工智能数据库系统微机与接口
软件测试软件外包系统分析与建模敏捷开发
法律法规历年试题软考英语网络管理员系统架构设计师信息系统监理师
高级通信工程师考试大纲设备环境综合能力
路由技术网络存储无线网络网络设备
CPMP考试prince2认证项目范围管理项目配置管理项目管理案例项目经理项目干系人管理
Powerpoint教程WPS教程
电子政务客户关系管理首席信息官办公自动化大数据
职称考试题目
就业指导签约违约职业测评
招生信息考研政治
网络安全安全设置工具使用手机安全
3DMax教程Flash教程CorelDraw教程Director教程
Dreamwaver教程HTML教程网站策划网站运营Frontpage教程
生物识别传感器物联网传输层物联网前沿技术物联网案例分析
互联网电信IT业界IT生活
Java核心技术J2ME教程
Linux系统管理Linux编程Linux安全AIX教程
Windows系统管理Windows教程Windows网络管理Windows故障
组织运营财务资本
视频播放文件压缩杀毒软件输入法微博
数据库开发Sybase数据库Informix数据库
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&}