angularjs怎么实现增删改查

 我来答
育知同创教育
2016-12-05 · 百度知道合伙人官方认证企业
育知同创教育
1【专注:Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】
向TA提问
展开全部
如果我想实现这样一个功能,当一个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元素的一些行为
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式