独立作用域:就是在指令中设置了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指令的详细讲解,不断补充的更多相关文章

  1. C++语言堆栈的详细讲解

    本文主要向大家介绍了C++语言堆栈的详细讲解,通过具体的内容向大家展示,希望对大家学习C++语言有所帮助. 一.预备知识—程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区 ...

  2. 16汇编第十讲完结Call变为函数以及指令的最后讲解

    16汇编完结Call变为函数以及指令的最后讲解 学了10天的16位汇编,这一讲就结束了,这里总结一下昨天的LOOP指令的缺陷,因为lOOP指令的缺陷,所以我们都改为下面的汇编代码使用了,自己去写,其中 ...

  3. auth权限认证详细讲解

    auth权限认证详细讲解 一.总结 一句话总结:四表两组关系,一个多对多(权限和用户组之间)(多对多需要3个表),一个一对多(用户和用户组之间) 1.实际上使用Auth是需要4张表的(1.会员表 2. ...

  4. Siki_Unity_2-1_API常用方法和类详细讲解(下)

    Unity 2-1 API常用方法和类详细讲解(下) 任务101&102:射线检测 射线origin + direction:射线检测:射线是否碰撞到物体 (物体需要有碰撞器),碰撞物体的信息 ...

  5. Nginx基础详细讲解

    Nginx基础详细讲解 链接:https://pan.baidu.com/s/1xB20bnuanh0Avs4kwRpSXQ 提取码:migq 复制这段内容后打开百度网盘手机App,操作更方便哦 1. ...

  6. vue-cli 目录结构详细讲解

    https://juejin.im/post/5c3599386fb9a049db7351a8 vue-cli 目录结构详细讲解 目录 结构预览 ├─build // 保存一些webpack的初始化配 ...

  7. 30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)

    前言 本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性.框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度.本文章节结构以从易到难进行组织,建议读者按章节顺序 ...

  8. head标签详细讲解

    head标签详细讲解 head位于html网页的头部,后前的标签,并以开始以结束的一html标签. Head标签位置如图: head标签示意图 head包含标签 meta,title,link,bas ...

  9. angular指令深度学习篇

    angular指令深度学习-过滤器 limitTo ... <body ng-app="app" > <div ng-controller="myCtr ...

随机推荐

  1. 【转载】package-info

    本文是转载,原文地址:http://strong-life-126-com.iteye.com/blog/806246 package-info.java对于经常使用外部包的程序员来说应该是熟悉陌生人 ...

  2. 2018-2019-1 20189215《Linux内核原理与分析》第五周作业

    <庖丁解牛>第四章书本知识总结 系统调用的三层机制 API(应用程序编程接口) 中断向量(系统调用处理入口) 服务程序(系统调用内核处理系统) 计算机的硬件资源是有限的,为了减少有限资源的 ...

  3. NOIP2016 “西湖边超萌小松鼠” 模拟赛

    总的来说,这套题的难度比较接近近些年来Day1的真实难度,认为非常值得一打 GotoAndPlay 题目大意 询问这个图上是否存在一种跳法,能跳到这个图上的每一个点 题目解析 犯了个低级错误,双向边忘 ...

  4. c++ 列表删除元素(erase)

    #include <list> #include <iostream> #include <iterator> using namespace std; int m ...

  5. JVM虚拟机调优指南

    本章通过阅读JVM垃圾搜集指南文档,整理虚拟机主要配置以及,理解不同的垃圾搜集器. 垃圾搜集算法 引用计数算法 根搜索算法 标记-清除算法 复制算法 标记-整理算法 分代收集算法 搜集算法网上有很多介 ...

  6. java读取和写入浏览器Cookies

    首先我们认识下什么是cookies: cookie实际上是一个存在你硬盘里的数据,但是这些数据很特殊,只能由web应用提交给浏览器帮助存储,并且我们还能读取浏览器存在本地的cookie web应用一般 ...

  7. HDU 5186 zhx's submissions 模拟,细节 难度:1

    http://acm.hdu.edu.cn/showproblem.php?pid=5186 题意是分别对每一位做b进制加法,但是不要进位 模拟,注意:1 去掉前置0 2 当结果为0时输出0,而不是全 ...

  8. hdu 3689 杭州 10 现场 J - Infinite monkey theorem 概率dp kmp 难度:1

    J - Infinite monkey theorem Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d &am ...

  9. 在JavaScript中进行文件处理,第四部分:对象URLs

    译注:原文是<JavaScript高级程序设计>的作者Nicholas Zakas写的,本翻译纯属为自己学习而做,仅供参考.原文链接:这里 学习到这里,你已经了解在传统方式中如何使用文件, ...

  10. eclipse SVN 上传.so库文件

    eclipse SVN提交代码的时候,是自动忽略.so库文件的.用下面所说的操作后,.so库文件右下角的图标会变成一个蓝色的+号的图标,这样就可以提交.so文件了 选择要上传的.so文件,右键 ——& ...