angular 啥时候用服务啥时候用指令
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angular 啥时候用服务啥时候用指令相关的知识，希望对你有一定的参考价值。
AngularJS是一款非常强大的前端MVC框架。同时，它也引入了相当多的概念，这些概念我们可能不是太熟悉。（译者注：老外真谦虚，我大天朝的码农对这些概念那是相当熟悉啊！）这些概念有：Directive（指令）
Controller（控制器）
Service （服务）
我们首先来创建一个module（模块），本文中的所有代码都会用到这个module。
var module = angular.module( "my.new.module", [] );
下一步，我们来创建一个新的service（服务）。假设我们上面的这个module是用来管理图书的。所以，这里我们来创建一个Book service，然后把一个JSON对象数组添加到这个serice中，这些对象代表很多book数据。
module.service( \'Book\', [ \'$rootScope\', function( $rootScope )
var service =
books: [
title: "Magician", author: "Raymond E. Feist" ,
title: "The Hobbit", author: "J.R.R Tolkien"
],
addBook: function ( book )
service.books.push( book );
$rootScope.$broadcast( \'books.update\' );
return service;
]); 参考技术A 如果我想实现这样一个功能，当一个input失去光标焦点时(blur)，执行一些语句，比如当输入用户名后，向后台发ajax请求查询用户名是否已经存在，好有及时的页面相应。
输入 camnpr
angularjs directive input focus
失去焦点后提示 camnpr 这个用户名已经存在
angularjs directive input focus用户名已经存在
HTML代码如下：
<body ng-controller="MainCtrl">
<lable>用户名:
<input type="text" ng-model="username" ng-blur="checkUsername()" />
<span style="color:red;" ng-show="usernameAlreadyExist">用户名已经存在</span>
</lable>
</body>
controller和directive的定义
app.controller('MainCtrl', function($scope)
$scope.checkUsername = function()
//send ajax to check on server
if ($scope.username === 'hellobug')
$scope.usernameAlreadyExist = true;
);
app.directive('ngBlur', function($document)
return
link: function(scope, element, attrs)
$(element).bind('blur', function(e)
scope.$apply(attrs.ngBlur);
);
)
在上面的例子里，directive返回对象里定义的link方法在blur事件触发时执行了scope上的checkUsername()方法。
如果是只有link方法，也可以简单的写成下面这种形式~直接返回link对应的function~
directive的简单写法
app.directive('ngBlur', function($document)
return function(scope, element, attrs)
$(element).bind('blur', function(e)
scope.$apply(attrs.ngBlur);
);
;
)
再来这样一个功能，我想让内容为哈哈哈哈的dom元素重复n遍，n是自定义的，以达到某种满屏大笑丧心病狂的效果 -_-，我知道ng-repeat就已经能干这事儿了，但是如果自己实现一下呢~
HTML
<ul repeater="20">
<li>哈哈哈哈</li>
</ul>
directive的定义
app.directive('repeater', function($document)
return
restrict: 'A',
compile: function(element, attrs)
var template = $(element).children().clone();
for(var i=0; i<attrs.repeater - 1; i++)
$(element).append(template.clone());
);
在上面例子的compile方法里，子元素被复制成了repeater制定的数量。
什么时候用compile，什么时候用link呢，或者两者可不可以一起用呢？
先从directive是如何在angular手下生效的说起吧~
编译三阶段：
1. 标准浏览器API转化
将html转化成dom，所以自定义的html标签必须符合html的格式
2. Angular compile
搜索匹配directive，按照priority排序，并执行directive上的compile方法
3. Angular link
执行directive上的link方法，进行scope绑定及事件绑定
为什么编译的过程要分成compile和link?
简单的说就是为了解决性能问题，特别是那种model变化会影响dom结构变化的，而变化的结构还会有新的scope绑定及事件绑定，比如ng-repeat
compile和link的形式
compile
function compile(element, attrs, transclude) ...
在compile阶段要执行的函数，返回的function就是link时要执行的function
常用参数为element和attrs，分别是dom元素和元素上的属性们，其它的以后细说
较少使用，因为大部分directive是处理dom元素的行为绑定，而不是改变它们
link
function link(scope, element, attrs, controller) ...
在link阶段要执行的函数，这个属性只有当compile属性没有设置时才生效
常用参数为scope，element和attrs，分别是当前元素所在的scope，dom元素和元素上的属性们，其它的以后细说
directive基本上都会有此函数，可以注册事件，并与scope相绑
compile和link的使用时机
compile
想在dom渲染前对它进行变形，并且不需要scope参数
想在所有相同directive里共享某些方法，这时应该定义在compile里，性能会比较好
返回值就是link的function，这时就是共同使用的时候
link
对特定的元素注册事件
需要用到scope参数来实现dom元素的一些行为
在语法中，啥时候用when啥时候用while？
When和While的区别1、when是atorduringthetimethat,既指时间点,也可指一段时间,while是duringthetimethat,只指一段时间,因此when引导的时间状语从句中的动词可以是终止性动词,也可以是延续性动词,而while从句中的动词必须是延续性动词.
2、when说明从句的动作和主句的动作可以是同时,也可以是先后发生；while则强调主句的动作在从句动作的发生的过程中或主从句两个动作同时发生.
3、由when引导的时间状语从句,主句用过去进行时,从句应用一般过去时；如果从句和主句的动作同时发生,两句都用过去进行时的时候,多用while引导,如：
a.Whentheteachercamein,weweretalking.当此句改变主从句的位置时,则为：Whileweweretalking,theteachercamein.
b.Theyweresingingwhileweweredancing.
/iknow-pic.cdn.bcebos.com/e824b899a9014c08c73b7a03047b02087bf4f410"target="_blank"title="点击查看大图"class="ikqb_img_alink">/iknow-pic.cdn.bcebos.com/e824b899a9014c08c73b7a03047b02087bf4f410?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"esrc="https://iknow-pic.cdn.bcebos.com/e824b899a9014c08c73b7a03047b02087bf4f410"/>
4、when和while还可作并列连词.when表示“在那时”；while表示“而,却”,表对照关系.如：
a.Thechildrenwererunningtomovethebagofricewhentheyheardthesoundofamotorbike.孩子们正要跑过去搬开那袋米,这时他们听到了摩托车的声音.
b.Heisstrongwhilehisbrotherisweak.
他长得很结实,而他弟弟却很瘦弱. 参考技术A while和when都是表示同时，到底句子中是用when还是while主要看从句和主句中所使用的动词是短暂性动作（瞬时动词）还是持续性动作。
1、若主句表示的是一个短暂性的动作，而从句表示的是一个持续性动作时，两者都可用。
例：
He fell asleep when [while] he was reading. 他看书时睡着了。
I met him when [while] I was taking a walk in the park. 我在公园散步时遇到了他。
2、若主、从句表示两个同时进行的持续性动作，且强调主句表示的动作延续到从句所指的整个时间，通常要用 while。
例：
Don’t talk while you’re eating. 吃饭时不要说话。
I kept silent while he was writing. 在他写的时候，我默不作声。
3、若从句是一个短暂性动作，而主句是一个持续性动作，可以 when 但不用 while。例：
When he came in, I was listening to the radio. 他进来时，我在听收音机。
It was raining hard when we arrived. 我们到达时正下着大雨。
4、若主、从句表示的是两个同时(或几乎同时)发生的短暂性动作，一般要用 when。
例：
I thought of it just when you opened your mouth. 就在你要说的时候，我也想到了。
注：
1.至于什么是短暂性动作，什么是持续性动作，其实有个很简单的规律。就是如果是进行时态，一般是持续性的。如果是过去式，一般是短暂性动作。
2.对于，填写when还是while的问题，通常首先看主句和从句中的时态，再根据以上4个规律来判断填写那个单词。 参考技术B when引导的时间状语从句中的动词可以是短暂性动词,也可以是延续性动词,而while从句中的动词必须是延续性动词。如果前后都是延续性动词只用while。——精？锐
以上是关于angular 啥时候用服务啥时候用指令的主要内容，如果未能解决你的问题，请参考以下文章
django查询优化——啥时候用sql，啥时候用python
vue.js中，啥时候用methods？啥时候用computed？啥时候用watch？
vue.js中，啥时候用methods？啥时候用computed？啥时候用watch
VB里 print这个怎么用啊，啥时候加 & 啥时候用 ； 啥时候用“ ” ？？等等 还有其他的么？