博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJS1.X学习笔记10-自定义指令(下)
阅读量:5243 次
发布时间:2019-06-14

本文共 1873 字,大约阅读时间需要 6 分钟。

  继续继续,学完这个部分就去吃饭。引用自由男人的话作为本文的开始:“默认情况下,链接函数被传入了控制器的作用域,而该控制器管理着的视图包含了指令所应用到的元素”。果然像是绕口令,还是看看你的例子比较好。

一、在一个控制器中应用同一指令

  

    
scope1

  这里给到自由男人的图解

   

  可以发现,这两个directive是共用一个作用域的,所以说那两个文本框会保持同步状态。

二、我要的是做我自己

  怎样才能是一个指令多次使用不相互影响呢?第一个想法是将他们放到不同的控制器,但是如果你就是想将它放到一个控制器中呢?scope:true就ok了

    
scope2

  这里还是用自由男人的例子来详细说明一下:

    
scope2

  这里给个比较复杂的图。

  

   这里存在三种情况:(1)定义在一个对象上(data.name):被指令共享

`           (2)直接定义在scope上(city):被指令共享,但是当用ng-model后会重建一个

             (3)没有定义,动态创建(country):修改是创建,各个指令的没关系

 

 三、拥抱自由

  将scope置为true已经很自由了,但是,还是有一些属性会被指令共享,有没有一种方法让指令彻底解放呢?有的。

  

directive("getData",function(){            return {                template:"
name:
"+ "
city:
"+ "
country:
", scope:{} } })

  这下我们的指令完全解放了。看看自由男人给的图

  

四、我不想要太自由

  有些时候我们并不希望太过自由,我们希望有那么一个人去叮嘱你,也希望有那么一个人可以倾诉。彻底的自由可能会让人手足无措。感谢Angular,这一切他都为我们实现了。

  (1)找一个可以叮嘱的人

  

    
scope4

  按理将,我创建了一个隔离作用域,他应该是控制器的数据没啥关系的,但是呢,我们让它有关系了,控制器的数据会单向留到指令中,指令的数据却不会到控制器中。为了证明指令的数据不会影响控制器的数据,我想改造一下上面的例子。

    
scope4
我是控制器中的:

  我们发现在我是指令中的那个文本框输入不会影响我是控制器中的数据。这是一种单向数据流,可以从控制器留到指令,反之则不能。

  (2)找一个既可以倾诉又可以叮嘱你的人

  

    
scope4
控制器:{
{data.name}}
我是控制器中的:

 

 

  这里创建了一个控制器和指令之间的双向数据流,控制器中的变化可以影响指令,指令中的变化也可以影响控制器。

  (3)取得控制器中的函数

  

    
scope1

  这个例子里,我们的指令是没有一个show方法的,但是它从控制器得到了这个方法,所以可以在指令中使用了。

  或许你会问一个问题,为什么没有从指令到控制器的单向数据流呢?我也不知道哦。

四、总结一下

  本文主要讲解了控制器作用域和指令作用域的关系。我们从控制器与指令作用域完全一样,到指令拥有自己的作用域,到指令作用域与控制器作用域完全分离,再到隔离作用域与控制器作用域的通信,比较清楚的理清了控制器作用域和指令作用域的复杂的情感纠葛。

转载于:https://www.cnblogs.com/floor/p/6683017.html

你可能感兴趣的文章
编程算法 - 左旋转字符串 代码(C)
查看>>
IOS解析XML
查看>>
Python3多线程爬取meizitu的图片
查看>>
树状数组及其他特别简单的扩展
查看>>
zookeeper适用场景:分布式锁实现
查看>>
110104_LC-Display(液晶显示屏)
查看>>
httpd_Vhosts文件的配置
查看>>
php学习笔记
查看>>
普通求素数和线性筛素数
查看>>
React Router 4.0 基本使用
查看>>
PHP截取中英文混合字符
查看>>
【洛谷P1816 忠诚】线段树
查看>>
电子眼抓拍大解密
查看>>
poj 1331 Multiply
查看>>
严重: 文档无效: 找不到语法。 at (null:2:19)
查看>>
tomcat7的数据库连接池tomcatjdbc的25个优势
查看>>
Html 小插件5 百度搜索代码2
查看>>
nodejs-Path模块
查看>>
P1107 最大整数
查看>>
监控CPU和内存的使用
查看>>