angular指令的详细讲解,不断补充
独立作用域:就是在指令中设置了scope: ****
·false 共享父作用域
·true 继承父作用域,并且新建独立作用域
·object 不继承父作用域,创建新的独立作用域
一般来说我们会使用第三种方式:为了避免同一父级作用域下,多个指令的相互污染。
在指令中设置了独立作用域之后,就会用三种方式与外界进行交互:@,=,&
1)@
这种使用方式一般使用与指令内部的作用,例如外部的控制器中定义了一个变量,这个变量只能由控制器自己进行修改,指令只能被动接受,此时就是用这种方式。
但是这不是一种双向绑定,因此需要花括号。
- <choice-item sty-obj= "{{styObj}}"></choice-item>
2)=
这种方式一般用于双向绑定,例如外部控制器定义了一个变量,这个变量不仅控制器能进行修改,并且指令也能进行修改,两边数据交互统一,这个时候就使用这种绑定方式。
这是一种双向绑定的方式意味着绑定的时候不需要花括号。
- <choice-item html-config='htmlConfig' em-config='emConfig'></choice-item>
3)&
这种方式一般是绑定函数,例如在指令内部想传递参数(必须以对象的形式)到外部控制器,并且能触发控制器的某方法。
- 指令使用场景:
<choice-item part-des = "['个人信息','职务信息','联系信息']"- filter-click = 'filterClick({headConfig:headConfig})' ></choice-item>
- 指令中:
- link: function($scope,el,attr) {
- // 点击确认
- $scope.filterClick({headConfig: $scope.emConfig});
- }
- 外部控制器:
- $scope.filterClick = function(obj){
- $scope.headConfig = getSelectedConfig(obj.headConfig);
- $scope.filter_show = false;
- };
replace: 是一个可选参数,如果设置了这个参数,值必须为true,因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部:
- <my-directive></my-directive>
- .directive("myDirective",function(){
- return {
- template:"<h3>世上无难事,只怕有心人</h3>"
- }
- })
- 调用指令之后的结果如下(这是默认replace为false时的情况):
- <my-directive>
- <h3>世上无难事,只怕有心人</h3>
- </my-directive>
- 如果replace被设置为了true:
- .directive("myDirective",function(){
- return {
- replace:true,
- template:"<h3>世上无难事,只怕有心人</h3>"
- }
- })
- 那么指令调用后的结果将是:
- <h3>世上无难事,只怕有心人</h3>
官方网址:
http://www.angularjs.net.cn/tutorial/5.html
angular指令的详细讲解,不断补充的更多相关文章
- C++语言堆栈的详细讲解
本文主要向大家介绍了C++语言堆栈的详细讲解,通过具体的内容向大家展示,希望对大家学习C++语言有所帮助. 一.预备知识—程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区 ...
- 16汇编第十讲完结Call变为函数以及指令的最后讲解
16汇编完结Call变为函数以及指令的最后讲解 学了10天的16位汇编,这一讲就结束了,这里总结一下昨天的LOOP指令的缺陷,因为lOOP指令的缺陷,所以我们都改为下面的汇编代码使用了,自己去写,其中 ...
- auth权限认证详细讲解
auth权限认证详细讲解 一.总结 一句话总结:四表两组关系,一个多对多(权限和用户组之间)(多对多需要3个表),一个一对多(用户和用户组之间) 1.实际上使用Auth是需要4张表的(1.会员表 2. ...
- Siki_Unity_2-1_API常用方法和类详细讲解(下)
Unity 2-1 API常用方法和类详细讲解(下) 任务101&102:射线检测 射线origin + direction:射线检测:射线是否碰撞到物体 (物体需要有碰撞器),碰撞物体的信息 ...
- Nginx基础详细讲解
Nginx基础详细讲解 链接:https://pan.baidu.com/s/1xB20bnuanh0Avs4kwRpSXQ 提取码:migq 复制这段内容后打开百度网盘手机App,操作更方便哦 1. ...
- vue-cli 目录结构详细讲解
https://juejin.im/post/5c3599386fb9a049db7351a8 vue-cli 目录结构详细讲解 目录 结构预览 ├─build // 保存一些webpack的初始化配 ...
- 30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)
前言 本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性.框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度.本文章节结构以从易到难进行组织,建议读者按章节顺序 ...
- head标签详细讲解
head标签详细讲解 head位于html网页的头部,后前的标签,并以开始以结束的一html标签. Head标签位置如图: head标签示意图 head包含标签 meta,title,link,bas ...
- angular指令深度学习篇
angular指令深度学习-过滤器 limitTo ... <body ng-app="app" > <div ng-controller="myCtr ...
随机推荐
- Maven聚合项目在eclipse中显示没有层次
大部分时间都在用idea做maven的项目,今天用eclipse导入了maven项目,果然不出所料,界面有显示问题,各个模块都堆叠在同一层级,根本看不出父项目与子项目之间的层次关系,见下图: 于是找修 ...
- 使用 log4js UDP 发送数据到 logstash
本文地址 http://www.cnblogs.com/jasonxuli/p/6532723.html 因为 nodejs 一般会部署在多台机器,并且每台机器会起多个进程,因此查看日志时往往要人工区 ...
- 20145335郝昊《网络攻防》Bof逆向基础——ShellCode注入与执行
20145335郝昊<网络攻防>Bof逆向基础--ShellCode注入与执行 实验原理 关于ShellCode:ShellCode是一段代码,作为数据发送给受攻击服务器,是溢出程序和蠕虫 ...
- Ubuntu16.04 安装JDK Tomcat
Ubuntu16.04安装jdk,下载linux中的64版本 需要下载jdk,tomcat安装包 tar.gz版本的 http://pan.baidu.com/s/1mi4WVhA 安装JDK: ho ...
- css 基础-1
css 基础-1 一. HTML框架 (frameset) 属性: noresize(不可移动), border(边框线的大小), rows(分割成行), cols(分割列) ...
- 16s workfollw
http://bioconductor.org/packages/devel/bioc/vignettes/metagenomeFeatures/inst/doc/Example_16S_Annota ...
- Hive之GROUP BY详解
一,GROUP BY 执行理解 先来看下表1,表名为test: 表1 执行如下SQL语句: SELECT name from test GROUP BY name ; 你应该很容易知道运行的结果, ...
- bzoj-4870-组合dp+矩阵幂
4870: [Shoi2017]组合数问题 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 829 Solved: 446[Submit][Statu ...
- 个人知识管理系统Version1.0开发记录(12)
最近碰到个问题,在五个工作日内阅读一个百万行左右代码量的新项目集合,如何解决呢? 第一个工作日,环境观察.待在那个项目组,看项目成员们在做些什么事情,开发,测试,聊天,或多或少可以收集到一些项目相关的 ...
- Eclipse CDT 配置C /C ++ 标准库 (UBUNTU 12 )
http://blog.csdn.net/wudiwo/article/details/7682320