angularjs 指令&& 绑定策略（@、=、&）
引入主题背景：angular 的指令配置中的template可以直接使用硬编码写相应的代码，不过也可以根据变量，进行动态更新。那么需要用到那些变量，因用法的不同，所以需要设置合适的绑定策略。
一、@ 绑定策略
@ 绑定策略，它的作用就是能把指令配置的独立Scope下变量的值等于根据@绑定的指令属性的值。（指令属性的值可以使用表达式，但是得出来的值一定是字符串。）
1、上代码：
&!DOCTYPE html&
lang="en"ng-app="myApp"
charset="UTF-8"
myDirective
type="text"ng-model="myUrl"
my-directivemy-url="{{myUrl}}"my-link-text="click me" ①
src="../../common/angular-1.0.1.min.js"
src="./demo1.js"
angular.module('myApp',[])
.directive('myDirective',function(){
restrict:'A',//属性方式
replace:true,
myUrl:'@',//@绑定策略(默认绑定到 my-url指令属性)
myLinkText:'@'//@绑定策略(默认绑定到 my-link-text 指令属性)
template:'&a href="{{myUrl}}"&{{ myLinkText }}&/a&'
2、 解释：
在上面的代码中，我创建了一个指令myDirective 该指令创建了两个变量 myUrl、myLinkText,并且这俩个变量都是采用@绑定策略。
说一下，不管是@、=还是&绑定策略，它们都有一个默认的方式，以@绑定策略为例，如上面代码那么样:myUrl:'@'，直接用一个@表示绑定的方式，它就会默认得将指令属性my-url的值赋值给myUrl变量。当然，你不想使用默认的方式，也就是说，你不想myUrl变量绑定my-url的值，而想要绑定其它属性名的值，那么你可以在@后加上你希望的属性名（格式要求：驼峰式）。如，我想讲myUrl绑定到&myDirective&&/myDirective&指令的some-attr属性的值，那么你可以这样写：myUrl:'@someAttr'。
那么我们知道了指令的myUrl变量的值是如何来的，那么我们要如何在template中使用它呢？这个很简单，看上面的代码就能很明白了，我们在template中的代码中需要用表达式的方式对其引用{{myUrl}}，这样我们就能够使用到myUrl变量的值了~
3、 小结：
@ 绑定策略只能绑定（或者理解成传递）字符串值。要想传递方法(&)或者实现双向数据绑定(=)等操作，就得需要使用其它俩样的绑定方式咯
教程对@、=、&的讲解：
　　为了让新的指令作用域可以访问当前本地作用域中的变量，需要使用下面三种别名中的一种。
　　1. 本地作用域属性：使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量：
　　@ (or @attr)
　　现在，可以在指令中使用绑定的字符串了。
　　2. 双向绑定：通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就像普通的数据绑定一样，本地属性会反映出父数据模型中所发生的改变。
　　= (or =attr)
　　3. 父级作用域绑定 通过&符号可以对父级作用域进行绑定，以便在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数。
　　要使调用带有一个参数的父方法，我们需要传递一个对象，这个对象的键是参数的名称，值是要传递给参数的内容。
　　& (or &attr)
阅读(...) 评论()为什么使用AngularJS 指令_百度知道angularJS（1）
restrict:指令在dom中的声明形式 E（元素）A（属性）C（类名）M（注释）priority优先级：一个元素上存在两个指令，来决定那个指令被优先执行terminal:true或false，告诉angular是否停止执行比高优先级指令低的指令template：两种形式，一种HTML文本；一个可以接受两个参数的函数，tElemetn和tAttrs，并返回一个代表模板的字符串。模板字符串必须存在一个根DOM元素templateUrl:两种形式，一种代表外部HTML文件路径的字符串；一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件路径的字符串replace:模板会被当做子元素插入到调用指令的DOM元素中还是替换该DOM元素scope：默认是false，true是会从父作用域继承并创建一个新的作用域对象,scope设置为一个空对像{},指令的模板就无法访问外部作用域了，词为隔离作用域，有三种方法可以使隔离作用域内的数据同指令外的作用域进行数据绑定，1，@（or @attr）内部可以使用外部作用域变量；2，=（or =attr）双向绑定；3，&（or &attr）传递引用controller：字符或函数，当为字符串时，会以字符串的名字来查找注册在应用中的控制器的构造函数。我们可以将任意的可以被注入的Angularjs服务传递给控制器，在控制器中也有一些特殊的服务可以被注入到指令中，如：controller：function($scope, $element, $attrs $transclude)。$transclude 嵌入链接函数会与对应的嵌入作用域进行绑定，transclude链接函数是实际被执行的用来克隆元素和操作DOM的函数。指令的控制器和link函数可以进行互换，控制器主要用来提供可以在指令间复用的行为，但链接函数只能在当前指令中定义行为，且无法在指令间复用。controllerAs：字符串，设置控制器的别名require：参数可以被设置为字符串或数组,字符串代表另外一个指令的名字，require 会将控制器注入到其值所指定的指令中,并作为当前指令的链接函数的第四个参数。require
参数的值可以用下面的前缀进行修饰,这会改变查找控制器时的行为: ？&如果在当前指令中没有找到所需要的控制器,会将 null 作为传给 link 函数的第四个参数。如果添加了 ^ 前缀,指令会在上游的指令链中查找 require 参数所指定的控制器。 ？^&将前面两个选项的行为组合起来,我们可选择地加载需要的指令并在父指令链中进行查找。如果没有前缀,指令将会在自身所提供的控制器中进行查找，如果没有找到任何控制器就抛出一个错误。compile (对象或函数)：compile 选项可以返回一个对象或函数。如果设置了 compile 函数,说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作,在这个函数中进行诸如添加和删除节点等DOM操作是安全的。本质上,当我们设置了
link 选项,实际上是创建了一个 postLink() 链接函数,以便 compile() 函数可以定义链接函数。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1043次
排名：千里之外
原创：11篇
(1)(1)(18)AngularJS支持用户自定义标签属性，在不需要使用DOM节点操作的情况下，添加自定义的内容。
前面提到AngularJS的四大特性：
　　2 模块化
　　3 指令
　　4 双向数据绑定
下面将会介绍如下的内容：
　　1 如何自定义指令
　　2 自定义指令的使用
　　3 自定义指令的内嵌使用
　　如何自定义指令：
　　Angular是基于模块的框架，因此上来肯定要创建一个自己的模块：
var myAppModule = angular.module("myApp",[]);
　　然后在此模块基础上创建指令directive
myAppModule.directive("xingoo",function(){
restrict:'AECM',
template:'&div&hello my directive&/div&',
repalce:true
　　其中，xingoo是我们自定义标签的名字，后面跟着它的方法函数。
　　函数return了一个键值对组合，其中定义了标签的使用方法、属性等等内容。
　　那么看看它都定义了哪些内容吧：
　　1 restrict：定义了标签的使用方法，一共四种，分别是AECM
　　2 template：定义标签的模板。里面是用于替换自定义标签的字符串
　　3 repalce：是否支持替换
　　4 transclude：是否支持内嵌
　　如何使用指令：
　　上面提到了标签的四种使用方法，即AECM。
　　A attribute属性：当做属性来使用
&div xingoo&&/div&
　　E element元素：当做标签元素来使用
&xingoo&&/xingoo&
　　C class类：当做CSS样式来使用
&div class="xingoo"&&/div&
　　M comments注释：当做注释使用（这种方式在1.2版本下亲测不可用！）
&!-- directive:xingoo --&
&div&&/div&
　　一般来说推荐，当做属性和元素来使用。
　　当想要在现有的html标签上扩展属性时，采用属性的方式。
　　当想要自定义标签时，采用标签的形式。
　　想要使用那种方式，必须要在定义directive中的restrict里面声明对应的字母。
　　指令的内嵌使用：
　　因为标签内部可以嵌套其他的标签，因此想要在自定义标签中嵌套其他的元素标签，则需要：
　　1&使用transclude属性，设置为true。
　　2&并使用ng-transclude属性，定义内部嵌套的位置。
　　代码如下：
myAppModule.directive("test",function(){
restrict:'AECM',
transclude:true,
template:"&div&haha! &div ng-transclude&&/div& wuwu!&/div&"
　　全部代码
&!doctype html&
&html ng-app="myApp"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&script src="/libs/angular.js/1.2.16/angular.min.js"&&/script&
&xingoo&&/xingoo&
&div xingoo&&/div&
&div class="xingoo"&&/div&
&!-- directive:xingoo --&
&div&&/div&
&xingoo&3333&/xingoo&
&test&4444&/test&
&script type="text/javascript"&
var myAppModule = angular.module("myApp",[]);
myAppModule.directive("xingoo",function(){
restrict:'AECM',
template:'&div&hello my directive&/div&',
repalce:true
myAppModule.directive("test",function(){
restrict:'AECM',
transclude:true,
template:"&div&haha! &div ng-transclude&&/div& wuwu!&/div&"
　　运行结果
阅读(...) 评论()angularjs指令中的replace与transclude参数 - 博客频道 - CSDN.NET
timeless的博客
断桥是否下过雪。
分类：Angularjs
replace, 是否替换掉自定义的指令,　默认是false
Element形式
&!DOCTYPE html&
&&& &head&
&&&&&&& &meta name=&viewport& content=&width=device-width, initial-scale=1.0&&
&&&&&&& &link rel=&stylesheet& href=&bootstrap.min.css&&
&&&&&&& &script src=&jquery.min.js&&&/script&
&&&&&&& &script src=&angular.min.js&&&/script&
&&&&&&& &script src=&bootstrap.min.js&&&/script&
&&&&&&& &script type=&text/javascript&&
&&&&&&&&&&& var app = angular.module('myapp', []);
&&&&&&&&&&& app.directive('cust', function(){
&&&&&&&&&&&&& return {
&&&&&&&&&&&&&&& restrict: 'EA',
&&&&&&&&&&&&&&& template:&&span&hello&/span&&
&&&&&&&&&&&&& }
&&&&&&&&&&& });& &
&&&&&&& &/script&
&&&&&&& &style type=&text/css&&
&&&&&&& &/style&
&&& &/head&
&&& &body ng-app=&myapp&&
&&&&&& &cust&&/cust&
&&& &/body&
可以看到cust指令还保留在html里，模板中的内容包含在其中.
attribute形式
&body ng-app=&myapp&&
&&&&&& &div cust&&/div&
&&& &/body&
可以看到div还保留在html中．
replace:true
Element形式
可以看到，&cust&&/cust&不见了.
Attribute形式
div不见了替换为span,但是span中有cust属性.
transclude是保留自定义指令子元素中的内容
默认是false
&!DOCTYPE html&
&&& &head&
&&&&&&& &meta name=&viewport& content=&width=device-width, initial-scale=1.0&&
&&&&&&& &link rel=&stylesheet& href=&bootstrap.min.css&&
&&&&&&& &script src=&jquery.min.js&&&/script&
&&&&&&& &script src=&angular.min.js&&&/script&
&&&&&&& &script src=&bootstrap.min.js&&&/script&
&&&&&&& &script type=&text/javascript&&
&&&&&&&&&&& var app = angular.module('myapp', []);
&&&&&&&&&&& app.directive('cust', function(){
&&&&&&&&&&&&& return {
&&&&&&&&&&&&&&& restrict: 'EA',
&&&&&&&&&&&&&&& replace: true,
&&&&&&&&&&&&&&& template:&&div&world&/div&&
&&&&&&&&&&&&& }
&&&&&&&&&&& });& &
&&&&&&& &/script&
&&&&&&& &style type=&text/css&&
&&&&&&& &/style&
&&& &/head&
&&& &body ng-app=&myapp&&
&&&&&& &cust&hello&/cust&
&&& &/body&
可以看到原先cust中的hello 没了，没有被保留下来，所以如果想要保留，那么就要transclude:true,并且在templace中相应的地方使用ng-transclude说明嵌入在哪.
&!DOCTYPE html&
&&& &head&
&&&&&&& &meta name=&viewport& content=&width=device-width, initial-scale=1.0&&
&&&&&&& &link rel=&stylesheet& href=&bootstrap.min.css&&
&&&&&&& &script src=&jquery.min.js&&&/script&
&&&&&&& &script src=&angular.min.js&&&/script&
&&&&&&& &script src=&bootstrap.min.js&&&/script&
&&&&&&& &script type=&text/javascript&&
&&&&&&&&&&& var app = angular.module('myapp', []);
&&&&&&&&&&& app.directive('cust', function(){
&&&&&&&&&&&&& return {
&&&&&&&&&&&&&&& restrict: 'EA',
&&&&&&&&&&&&&&& replace: true,
&&&&&&&&&&&&&&& transclude: true,
&&&&&&&&&&&&&&& template:&&div&world&div ng-transclude&&/div&&/div&&
&&&&&&&&&&&&& }
&&&&&&&&&&& });& &
&&&&&&& &/script&
&&&&&&& &style type=&text/css&&
&&&&&&& &/style&
&&& &/head&
&&& &body ng-app=&myapp&&
&&&&&& &cust&hello&/cust&
&&& &/body&
可以看到hello被嵌入进了div中，angular还自动将其包裹在span中.
当然如果你本来就有了span, angular是不会再加span的．
上面的保留了hello,hello是cust的子元素，如果我想把cust也保留嵌入模板该怎么做，你或许说把replace改为false不就保留了．这样是可以保留，但跟我要说的不一样．
如果我把body改成&label cust&hello&/label&,我想保留label该怎么做，现在只能把hello嵌入模板．
所以接下来要说的就是transclude:'element',把子元素和本身都保留下来.
&!DOCTYPE html&
&&& &head&
&&&&&&& &meta name=&viewport& content=&width=device-width, initial-scale=1.0&&
&&&&&&& &link rel=&stylesheet& href=&bootstrap.min.css&&
&&&&&&& &script src=&jquery.min.js&&&/script&
&&&&&&& &script src=&angular.min.js&&&/script&
&&&&&&& &script src=&bootstrap.min.js&&&/script&
&&&&&&& &script type=&text/javascript&&
&&&&&&&&&&& var app = angular.module('myapp', []);
&&&&&&&&&&& app.directive('cust', function(){
&&&&&&&&&&&&& return {
&&&&&&&&&&&&&&& restrict: 'EA',
&&&&&&&&&&&&&&& replace: true,
&&&&&&&&&&&&&&& transclude: 'element',
&&&&&&&&&&&&&&& template:&&div&world&div ng-transclude&&/div&&/div&&
&&&&&&&&&&&&& }
&&&&&&&&&&& });& &
&&&&&&& &/script&
&&&&&&& &style type=&text/css&&
&&&&&&& &/style&
&&& &/head&
&&& &body ng-app=&myapp&&
&&&&&& &label cust&hello&/label&
&&& &/body&
可以看到label保留下来了.
下面最后一个比较６,
将上面的代码中replace改为false
一切灰飞烟灭只留下了注释．
这是为什么呢，跟踪源码
if (directiveValue == 'element') {
&&&&&&&&&&& hasElementTranscludeDirective =
&&&&&&&&&&& terminalPriority = directive.
&&&&&&&&&&& $template = $compileN
&&&&&&&&&&& $compileNode = templateAttrs.$$element =
&&&&&&&&&&&&&&& jqLite(document.createComment(' ' + directiveName + ': ' +
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& templateAttrs[directiveName] + ' '));
&&&&&&&&&&& compileNode = $compileNode[0];
&&&&&&&&&&& replaceWith(jqCollection, sliceArgs($template), compileNode);
&&&&&&&&&&& childTranscludeFn = compile($template, transcludeFn, terminalPriority,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& replaceDirective && replaceDirective.name, {
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // Don't pass in:
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // - controllerDirectives - otherwise we'll create duplicates controllers
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // - newIsolateScopeDirective or templateDirective - combining templates with
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //&& element transclusion doesn't make sense.
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // We need only nonTlbTranscludeDirective so that we prevent putting transclusion
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // on the same element more than once.
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& nonTlbTranscludeDirective: nonTlbTranscludeDirective
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& });
&&&&&&&&& } else {
&&&&&&&&&&& $template = jqLite(jqLiteClone(compileNode)).contents();
&&&&&&&&&&& $compileNode.empty(); // clear contents
&&&&&&&&&&& childTranscludeFn = compile($template, transcludeFn);
&&&&&&&&& }
&&&&&&& if (directive.template) {
&&&&&&&&& hasTemplate =
&&&&&&&&& assertNoDuplicate('template', templateDirective, directive, $compileNode);
&&&&&&&&& templateDirective =
&&&&&&&&& directiveValue = (isFunction(directive.template))
&&&&&&&&&&&&& ? directive.template($compileNode, templateAttrs)
&&&&&&&&&&&&& : directive.
&&&&&&&&& directiveValue = denormalizeTemplate(directiveValue);
&&&&&&&&& if (directive.replace) {
&&&&&&&&&&& replaceDirective =
&&&&&&&&&&& if (jqLiteIsTextNode(directiveValue)) {
&&&&&&&&&&&&& $template = [];
&&&&&&&&&&& } else {
&&&&&&&&&&&&& $template = removeComments(wrapTemplate(directive.templateNamespace, trim(directiveValue)));
&&&&&&&&&&& }
&&&&&&&&&&& compileNode = $template[0];
&&&&&&&&&&& if ($template.length != 1 || compileNode.nodeType !== NODE_TYPE_ELEMENT) {
&&&&&&&&&&&&& throw $compileMinErr('tplrt',
&&&&&&&&&&&&&&&&& &Template for directive '{0}' must have exactly one root element. {1}&,
&&&&&&&&&&&&&&&&& directiveName, '');
&&&&&&&&&&& }
&&&&&&&&&&& replaceWith(jqCollection, $compileNode, compileNode);
&&&&&&&&&&& var newTemplateAttrs = {$attr: {}};
&&&&&&&&&&& // combine directives from the original node and from the template:
&&&&&&&&&&& // - take the array of directives for this element
&&&&&&&&&&& // - split it into two parts, those that already applied (processed) and those that weren't (unprocessed)
&&&&&&&&&&& // - collect directives from the template and sort them by priority
&&&&&&&&&&& // - combine directives as: processed + template + unprocessed
&&&&&&&&&&& var templateDirectives = collectDirectives(compileNode, [], newTemplateAttrs);
&&&&&&&&&&& var unprocessedDirectives = directives.splice(i + 1, directives.length - (i + 1));
&&&&&&&&&&& if (newIsolateScopeDirective) {
&&&&&&&&&&&&& markDirectivesAsIsolate(templateDirectives);
&&&&&&&&&&& }
&&&&&&&&&&& directives = directives.concat(templateDirectives).concat(unprocessedDirectives);
&&&&&&&&&&& mergeTemplateAttributes(templateAttrs, newTemplateAttrs);
&&&&&&&&&&& ii = directives.
&&&&&&&&& } else {
&&&&&&&&&&& $compileNode.html(directiveValue);
&&&&&&&&& }
可以看到，两次replaceWith是关键.
排名：千里之外
（49）（1）（5）（0）（4）（19）（2）（0）（0）（3）（1）（0）（0）（0）（0）（0）（1）（1）（3）（0）（0）（0）（5）（0）（8）（0）（2）（0）（6）（0）（1）（4）（3）（5）（3）（3）（2）（1）（2）（1）