angularJS----directive

　　directive--指令

　　　　　指令，指的就是组件的意思。ng把组件称为指令。指令是使用ng的一个重点。使用directive()可以自定义指令，

　　　directive方法接收2个参数：1.指令的名字（str） 2.一个函数，该函数返回一个对象（注意：从之前遇到过的代码，按道理应该是返回一个函数，然后执行函数才对，而ng是直接返回一个对象，网上找了一下资料：http://www.cnblogs.com/darrenji/p/5084105.html 结合老司机的话：返回的对象在内部又被当作参数传入一个函数中，最终生成指令）.

　　　　值得研究的是返回的对象里的各个属性的作用。下面是详细的属性参数：

　　　　directive('app',function(){

　　　　　　return{

　　　　　　　　restrict:'ECMA',

　　　　　　　　replace:true/false,

　　　　　　　　template/templateUrl: 字符串模版/模版地址,

　　　　　　　　scope: true/false/{},

　　　　　　　　link: function(scope,ele,attr){

　　　　　　　　　　　　//code

　　　　　　　　controller: function(){

　　　　　　　　　　　　　　　　//code

　　　　　　　　　　　　　　}

　　　　以下代码是自定义指令的简单使用

Document

</body>
<script src="../js/angular.js"></script>
<script>
var app = angular.module('demo',[]);
app.controller('myCtrl',function($scope){

    });
    </span><span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt;简单的自定义指令演示</span>

app.directive('app',function(){
return{
restrict:'EAMC',template:'

hello,world!

',replace: false
}
})
</script>
</html>

　　　　在chrome中显示：

restrict属性：‘ECMA’

　　　　该属性可选。默认restrict：‘ECMA’， E--表示element（元素）C--表示class（类名） M--表示注释 A--表示attribute（属性）

　　该属性可以选择至少一个，表示自定义指令的在html的表现形式。

template属性：字符串模版

　　　　该属性可选。默认为空，用于导入模版，配合replace属性使用注意：当replace为true时，他只允许有一个根节点，否则会报错

Document

<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>

</body>
<script src="../js/angular.js"></script>
<script>
var app = angular.module('demo',template:'

</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>

</html>

chrome中显示：

templateUrl属性：模版地址/function（）

　　该属性可选属性值可以是一个文件地址或者是一个返回外部html文件路径字符串的函数，该函数接收两个参数：tElement，tAttrs。

　　该属性默认为空，用于导入模版，配合replace属性使用注意：当replace为true时，他只允许有一个根节点，否则会报错

replace属性：true/false

　　该属性可选。默认是false 为true时，分2种情况：1.指令是自定义标签时：模版会替换掉此标签，并‘继承’此标签的所有属性。2.指令是自定义属性时：模版会替换掉指令所在的标签，并‘继承’此标签的所有属性（包括指令）其实，可以总结为1种情况：模版会替换掉指令所在的标签，并‘继承’此标签的所有属性（包括指令）。问题来了！模版会继承他的方法吗？

事实上，他的方法也是会被‘继承’的（想不通啊）

> > content=> content=> Document >

src=>

a= data=> show your code

</div>

link属性：function(scope,attr,ctrl,linker){//code}

　　该属性可选。默认为空，link属性主要用于操作DOM元素和绑定事件。该函数接收5个参数（后面2个参数几乎用不到）

　　　　scope表示指令所在的作用域（如果scope属性存在，则按照他的规则，若没有，scope表示父级scope）可以在scope下设置变量如：scope.name='tom'

注意：不能在scope属性下设置变量。一般在link属性和controller属性下设置变量。

　　　　ele表示指令元素（注意：他是js对象，不是jq对象，他可以直接操作内置的一些‘jq’方法，很可能是在内部将ele先转为jq对象，再调用方法），可以直接操作ng内置的jq方法，也可以引入jq文件，直接用jq操作。

　　　　attr表示指令元素的属性集合（注意：attr是一个对象） attr是一个很强大的东西。强大就强大在它可以包含自己！一头雾水？？一脸懵逼？？试想一下，当指令以属性的形式表现时，调用ele.attr会把所有属性展现出来，包括指令。先看代码：

Document

});
app.directive(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;hello</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;(){
    </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;return</span><span style="background-color: #f5f5f5; color: #000000"&gt;{
        restrict:</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;A</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,link:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;(scope,attr){
            console.log(attr);
        }
    }
})

</script>
</html>

在chrome中显示：

　　能拿到他的自己又有什么用呢（提示：ng的双向绑定）我现在有个需求：我想通过指令让文字变任意颜色，用angular怎么弄？思路：1.考虑到ng双向绑定数据和attr的特性，2.可以设置ng-color指令，随便给他一个颜色 ng-color=‘red’,3.通过attr获取到属性值‘red’，4.然后用jq或者内置方法css（）设置样式给指令所在标签即可

　　具体实现：

Document

});

app.directive(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;ngColor</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;() {
        </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;return</span><span style="background-color: #f5f5f5; color: #000000"&gt; {
            link: </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;(scope,attr) {
                console.log(attr)
                ele.css(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;color</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,attr.ngColor)
            }
        }
    })

</script>
</html>

　在chrome中显示：

　　　　现在，我想让div变什么颜色就变什么颜色。只要在ng-color（注意：ng-color不是ng内置指令）上绑定相应的‘颜色’即可。是不是感觉跟ng内置的指令很类似？ng内部指令估计就是这样实现的（以后研究一下源码）。

　　　　好了。巩固一下，我们来写一个跟ng-click一样的指令，我把它命名为 clicking

Document 点击

    $scope.show </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;(){
       console.log(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;show your code!</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;);

    };

});

 app.directive(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;clicking</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,attr){
            console.log(attr);
            ele.bind(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;click</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;() {
                    scope.$apply(attr.clicking);
                });
        }
    }
});

</script>
</html>

　　在这里解释一下$apply：调用$apply会把内容添加到循环序列中，监听这个内容，一旦内容发生改变，就会更新数据（这个例子中，点击执行了show方法，被监控到了）

　　后面的2个参数，很少用到，就不展开讨论了。

　scope：false/true/{}

　　　　该属性可选，默认值是false。 scope属性是用来创建属于指令自己的作用域（称为‘隔离作用域’）

　　　　当为false时，创建的指令继承了父作用域的一切属性和方法，这也使得在指令的模板中我们可以使用这些属性和方法。

　　　　当为true时，指令新创建了一个作用域，只不过这个作用域是继承了我们的父作用域；我觉得可以这样理解，我们新创建的作用域是一个新的作用域，只不过在初始化的时候，用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。

　　　　当为{}时，指令创建了一个完全与父级作用域隔离的新的作用域 AngularJS最强的大的地方之一就是它可以构建组件，无论放在哪里都是可以使用的；之所以可以做到这些，不得不归功于指令的这个属性；当我们将scope设置为{}时，意味着我们创建的一个新的与父作用域隔离的新的作用域，这使我们在不知道外部环境的情况下，就可以正常工作，不依赖外部环境。

　　　　我们使用了隔离的作用域，不代表我们不可以使用父作用域的属性和方法。

　　　　我们可以通过向scope的{}中传入特殊的前缀标识符（即prefix），来进行数据的绑定。

　　　　　　@：@将本地作用域和DOM中的属性值绑定起来（且这个属性的值必须是父级作用域中的）什么意思呢？说的简单一点就是假设你在模板中有个双花括号表达式，然后我们把表达式里的内容和html中指令里特定名字的属性绑定起来具体实例如下：

　　具体来说，就是在指令所在的标签定义一个自定义属性，用来装$scope.name (大括号的形式。为什么是大括号？自己想。) 然后@自定义属性给scope选项就ok了。当然了，他是有简写方式的：如果写成name：‘@’。就表示自定义属性名为name（跟scope选项的name形同）

　　　　　　= ：这个符号是也是用来引用外部数据的。跟@的不同的是：@是针对字符串（准确来说是表达式expression）而用，但=是针对某个对象的引用；但就拿上边的例子而言，我们在html中，把Name这个字符串通过一对双花括号传递给for-name属性，但如果我们用了=，这里传入的Name就不应该是一个字符串，而是一个对象的引用。

　　　这2种方式都可以引用到$scope.name='jjk'

　　这例子并不是一目了然。再举几个例子：

　　　　1.对象数组的引用

　　在chrome中显示：

结果就是，一个张三，一个李四。这个例子中，data是一个对象数组，里面包含了两个对象，所以，我们分别把两个对象传递给了case这个属性，case属性就把这个对象的引用传递给了模板中我们写的{{ case.name }}中的case;而如果你在=后边加上了自己定义的名字，那只要把html里case属性换成那个名字就可以了。

　　　　2.经典的双向输入框

　　　　　　创建两个双向绑定的输入框，最简单的实现方式就是：

　　　　　　&：它的含义是：对父级作用域进行绑定，并将其中的属性包装成一个函数，注意，是属性，意即，任何类型的属性都会被包装成一个函数，比如一个单纯的字符串，或是一个对象数组，或是一个函数方法。

　　　　　　　如果是字符串、对象数组和无参的函数，那么可想而知，它们都会被包装成一个无参的函数，若是有参的函数方法则反之，并且我们需要为其传入一个对象。现在，分别针对有参和无参两种情况举例。

　　　　无参数的情况下：

　特别注意：　　　

　　　　1.指令的本地属性（即模板里花括号中的属性）需要从本地取值，所以使用了controller选项，而在controller选项中，两个无参方法分别返回了父级scope中的title字符串和contents对象数组。

　　　　2.在HTML中，我们把设置了get-title和get-content的属性值为title和contents，这实际上就完成了与父级scope的绑定，因为我们才可以从那儿取得实质的内容。

　　　　有参数的情况下：

　　这个例子中，通过模板中的ng-click触发了show函数并将一个叫做model的对象作为name参数传递了进去，而在html中，我们把show的属性值设为showName(name)。这其中的道理跟无参的例子是大同小异的。

　　为什么Angular要为我们提供这样一套绑定策略呢？就是因为它想让我们在为指令创建隔离作用域的同时，还能访问到父级中的属性，这就像，你在隔离作用域身上打了一个洞，然后用一条管道，把指令内部和外界的属性给连起来（绑定），并且一切的通信都只能通过这条管道来实行。

　　controller function($scope){//code}

　　　　该属性可选。可用于在指令中创建自己的作用域（可以注入$scope服务）创建的作用域是和link函数的scope是一样的 。controller和link很相似，但一般场景下都不要使用controller，只需要把逻辑写在link中就可以了；用controller的场景就是该指令（假设为a）会被其他指令（假设为b）require的时候，这样就会在b指令的link函数中传入这个controller（如果require多个的话，传入的是一个数组，数组中存放的是每一个require的指令对应的controller），目的很显然是为了指令间进行交流的。还有就是 ng会先执行controller，再执行link函数而且会覆盖相同属性。

Document {{name}}

})
.directive(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;hello</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;(){
    </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;return</span><span style="background-color: #f5f5f5; color: #000000"&gt;{
        link: </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;(scope,attrs){
            scope.name </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;jjk</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
            console.log(scope);
        },scope:{},controller: </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;($scope){
            $scope.name </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;dk</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
            $scope.sex</span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;man</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
            console.log($scope);
        }
    }
})

</script>
</html>

　　在chrome中显示：

　　关于directive的总结就先到这里了。细节以后慢慢补充

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2017.04.14 19：23

directive--指令

restrict属性：‘ECMA’

template属性：字符串模版

templateUrl属性：模版地址/function（）

replace属性：true/false

link属性：function(scope,attr,ctrl,linker){//code}

scope：false/true/{}

相关推荐

　　directive--指令

　scope：false/true/{}