文档章节

Angular directive 深入探讨

i5--lou
 i5--lou
发布于 2016/03/17 10:44
字数 752
阅读 32
收藏 1

关于Angular directive 我已经写过一篇博文来介绍过了,但是今天我为什么还要再来讲一下呢?因为原来的只是最简单的实现,而在我们真正的项目中,这些最简单方式似乎就没有什么用了,那么这个时候我们就需要用到更多的功能甚至方法来实现我们项目需求中的那些效果。。。。

好啦,废话不多说,我们开始讲解吧

首先对于directive这个方法我就不多介绍了,具体我们就来讲一下directive中的那个回调函数说返回的对象,在上次我们讲到了这个对象可以返回三个属性,他分别是restrict,template,replace,当然这三个属性是最直接的,也是最简单的,在这里我就不多介绍了哈

那么接下来介绍一个link属性,看这里........

link:function(scope,element,attrs){
    element.text('Directive!!!');
}

没错的,这是一个属性,也是一个方法,他的作用主要是为了操作dom,我们看一下link函数的参数:

  1. scope   这个就是当前controller的$scope对象,没啥问题哈

  2. element 这个是当前dom节点经过"jQuery"处理后的对象.当然这个是jQuery的阉割版,方法是少了很多的,但是在Angular里面,已经足够了.....

  3. attrs   这个对象包含当前dom节点上的各种属性标签的值.不过要注意的是这边会将xxx-bbb这种形式改为xxxBbb这种驼峰形式

好啦,说到这里好多人就会着急来试一试了,咱们先别急哈,还有几个点要讲一下,关于link函数中的参数,如果我们要用的话,这里是会有一个异步加载的问题的,天哪!!!!!!又是异步问题,可能这是大家最头疼的问题吧,哎没办法啦........

打个比方,我们现在要用scope和element这两参数,那么我们就要需要异步调用,那么怎么调用呢?

下面提供两种方法

一.这个方法是在directive中dom内容加载完成之后,这些函数都是可以取到值得啦.....

angular.element(element).ready(function(){
    //do something
    console.log('scope:',scope);
    console.log('element:',element);
});

二.此方法比较简单粗暴,就是我们延时一段时间之后再去取值,这个是最稳妥的方法,也是比较直接的啦,嘿嘿

setTimeout(function(){
    //do something
    console.log('scope:',scope);
    console.log('element:',element);
},100);

OK,有了以上的方法呢,就可以保证可以取到值了哈,

还记得我还在上课的时候,老师说过一句话,'只要你能取到页面中的那个元素,那就就可以对它想干嘛就干嘛了,嘿嘿嘿.....'

当然,这话说的很有道理,既然我们已经取到了这个节点,那么我们要对这些节点做任何操作都是可以的了


© 著作权归作者所有

i5--lou
粉丝 20
博文 72
码字总数 33811
作品 0
杭州
程序员
私信 提问
AngularJS - Top 6 Concepts that Developers Loved

This article represents top 6 popular AngularJS topics that has been used most by the AngularJS developer community to date. The inference is derived based on number of tagged d......

perfectspr
2014/12/03
55
0
RegularJS 0.2.12 发布,JavaScript MVC 框架

RegularJS 0.2.12 发布,此版本现已提供下载。 看到 regular 的名字就能感受到扑面而来的山寨味,在开始前,我还是要说明下regularjs出现绝对不仅仅是作者的造轮子情绪泛滥的结果 Angularjs的...

oschina
2014/10/19
1K
1
RegularJS 0.2.11 发布,JavaScript MVC 框架

RegularJS 0.2.11 发布,此版本现已提供下载,主要是添加了 refs 支持。 看到 regular 的名字就能感受到扑面而来的山寨味,在开始前,我还是要说明下regularjs出现绝对不仅仅是作者的造轮子情...

oschina
2014/10/12
1K
6
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
309
2
AngularJs学习笔记--bootstrap

一、总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化。...

武文海
2015/02/05
3.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

Kafka再平衡机制详解

所谓的再平衡,指的是在kafka consumer所订阅的topic发生变化时发生的一种分区重分配机制。一般有三种情况会触发再平衡: consumer group中的新增或删除某个consumer,导致其所消费的分区需要...

爱宝贝丶
23分钟前
19
0
element 验证 请输入大于0的整数

data() { var validatePass = (rule, value, callback) => { // if (value <= 0) { // callback(new Error('请输入大于0的整数')); // } else { // c......

沉迷代码我爱学习
34分钟前
4
0
报表工具花钱or开源?我对比了这6个工具

近一年都在处理报表问题,调研了不少报表工具,也开发了适合公司业务的报表应用。分享一些关于如何选择报表工具的个人观点,希望对你有参考作用。 对于大部分企业来说,能花时间和人力去开发...

帆软
34分钟前
3
0
自建redis笔记--Redis cluster搭建

Redis cluster搭建 2018年十月 Redis 发布了稳定版本的 5.0 版本,推出了各种新特性,其中一点是放弃 Ruby的集群方式,改为 使用 C语言编写的 redis-cli的方式,是集群的构建方式复杂度大大降...

北极之北
34分钟前
3
0
分享一个在caffe中实现的yolo层

这是别人实现的,是我移植到cc的cpu实现,可以实现caffe中使用yolo3,但是我感觉实际效果不如darknet 好点 template <typename Dtype>inline Dtype sigmoid(Dtype x){return 1. / (1. ...

开飞色
36分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部