angularjs是目前市场上仅有的具有自定义指令功能的开发框架。
首先介绍一下对自定义指令属性的理解
1、restrict：指令在html中的应用形式（'A''E''C''M'）,分别指代attribute、element、class、comment,默认值是A
2、scope：指令的作用范围，scope在指令中通过属性标签传递，每一个指令都有自己的作用域，并且比依赖于父级scope作用域。
scope对象有name和type变量属性，用法如下：
name:"@"(值传递，单向绑定)：@符号表示变量是值传递，指令会检索从父级scope中传递而来的字符串的值，指令可以使用该值但是无法修改，属于只读数据；
amount:"="(引用，双向绑定)：=表示变量是引用传递，指令检索主scope引用的值，值可以是任意类型的，包括复合对象和数组。指令可以更改父级scope中的值；
save:"&"(表达式)：&表示变量是父级scope中的表达式，允许指令实现比修改值更高的操作
3、template：替代原始模块中标记的字符串，替换功能将替换所有旧元素为新值，template使用scope中定义的变量与replace相关，replace：说明是否替换原始标记中的值或是追加原始标记中的值，默认值是false，这时原始标记将保留；
4、trasclude：说明自定义指令是否复制原始标记中的内容
5、link：次属性非常重要很常用，主要负责操作DOM事件及注册事件监听器等；link方法的参数如下：
scope：指令scope的引用，scope在初始化时是不被定义的，link方法会注册监听器监视值变化事件；
element：包含指令的DOM元素的引用；一般用jquery方法来操作dom；
controller：在嵌套指令的情况下使用，把子指令的引用提供给父指令，指令之间可以交互
注意，当调用link 方法时， 通过值传递（"@"）的scope 变量将不会被初始化，它们将会在指令的生命周期中另一个时间点进行初始化，如果你需要监听这个事件，可以使用scope.$watch 方法。
代码示例：
/创建指令模块 (或者检索现有模块)
var m = angular.module("myApp");
// 创建"my-dir"指令
myApp.directive("myDir", function() {
return {
restrict: "E", // 指令是一个元素 (并非属性)
scope: { // 设置指令对于的scope
name: "@", // name 值传递 （字符串，单向绑定）
amount: "=", // amount 引用传递（双向绑定）
save: "&" // 保存操作
},
template: // 替换HTML (使用scope中的变量)
"<div>" +
" {{name}}: <input ng-model='amount' />" +
" <button ng-click='save()'>Save</button>" +
"</div>",
replace: true, // 使用模板替换原始标记
transclude: false, // 不复制原始HTML内容
controller: [ "$scope", function ($scope) { … }],
link: function (scope, element, attrs, controller) {…}
}
});
几种方式实例的代码demo：
1.控制器的数据向指令传递
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <script src="js/angular.js"></script> <script src="js/index.js"></script> <title>Document</title> </head> <body ng-controller="indexCtrl"> <div my-directive my-url="{{datas.url}}" my-name="{{datas.name}}"></div> </body> <!-- 控制器的数据向指令传递 --> </html>
2.templateUrl 参数实例
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <script src="js/angular.js"></script> <script src="js/index.js"></script> <title>Document</title> </head> <body ng-controller="indexCtrl"> <div my-directive my-url="{{datas.url}}" my-name="{{datas.name}}"></div> <div my-directive1 my-url="{{datas.url}}" my-name="{{datas.name}}"></div> <script type="text/ng-template" id="hello.html"> <p>名称：{{myUrl}}</p> <p>路径：{{myName}}</p> </script> </body> </html>
3.transclude参数实例
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <script src="js/angular.js"></script> <script src="js/index.js"></script> <title>Document</title> </head> <body ng-controller="indexCtrl"> <div my-directive my-url="{{datas.url}}" my-name="{{datas.name}}"></div> <div my-directive1 my-url="{{datas.url}}" my-name="{{datas.name}}"></div> <script type="text/ng-template" id="hello.html"> <p>名称：{{myUrl}}</p> <p>路径：{{myName}}</p> </script> <div sidebox title="Links"> <ul> <li>first link</li> <li>second link</li> </ul> </div> <div sidebox title="TagCloud"> <div class="tagcloud"> <a href="">Graphics</a> <a href="">AngularJS</a> <a href="">D3</a> <a href="">Front-end</a> <a href="">Startup</a> </div> </div> </body> </html>
4.controller参数实例
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <script src="js/angular.js"></script> <script src="js/index.js"></script> <title>Document</title> </head> <body ng-controller="indexCtrl"> <div your-aa sex="{{datas.sex}}"></div> </body> </html>
公共的js代码如下：
var myapp = angular.module("app",[]); myapp.controller("indexCtrl",function($scope){ $scope.datas = { url:'http://www.baidu.com', name:'点我去百度', sex:'女' } }) myapp.directive("myDirective",function(){ return{ restrict:'A', scope:{ 'myUrl':'@', 'myName':'@' }, replace:true, template:'<a href="{{myUrl}}">{{myName}}</a>', link:function(){ } } }) myapp.directive("myDirective1",function(){ return{ restrict:'AE', scope:{ 'myUrl':'@', 'myName':'@' }, replace:false, templateUrl:'hello.html', link:function(){ } } }) myapp.directive("sidebox",function(){ return{ restrict:'AE', scope:{ title:'@' }, transclude:true, template:'<div class="sidebox"> <div class="content"> <h2 class="header">{{ title }}</h2> <span class="content" ng-transclude> </span> </div> </div>' } }) myapp.directive("yourAa",function(){ return{ restrict:'A', scope:{ sex:'@' }, controller:'someController' } }) myapp.controller("someController",function($scope,$element,$attrs,$transclude){ alert($scope.sex); })