Anaular指令详解
目录：directive() restrict replace template templateUrl scope transclude ng-transclude controller
directive()
自定义指令，第一个参数是自定义指令的名字，第二个参数是一个函数，这个函数的返回值就是自定义指令该干的事情。
//自定义指令指定控制器的名字 .directive("myDirective",function(){ return{ } })
restrict
指定调用自定义指令的方式：A属性/E标签/C类/M注释。推荐用属性的形式调用自定义指令。
.directive("myDirective",function(){
return{
//指定此指令用属性调用
restrict:'A'
}
})
replace
规定自定义指令模板是被包含在指令元素里面还是替换自定义指令，true表示模板替换视图中的自定义指令。false是默认值，表示模板被嵌套在自定义指令中。
.directive("myDirective",function(){
return{
//规定调用指令的方式
restrict:'A',
//模板替换自定义指令
replace:true,
//定义模板
template:'<a href="http://www.baidu.com">点我跳到百度<span>{{my}}</span></a>'
}
})
template
定义模板，值是一个html元素的字符串。参考replace代码
templateUrl
同template相似，值是一个引入外部模板的路径，不能跨域。
.directive("myDirective",function(){
return{
//规定调用指令的方式
restrict:'A',
//模板替换视图中的指令
replace:true,
//定义模板路径
templateUrl:'../tem.html'
}
})
scope
创建隔离作用域，值为true时会继承父级作用域，创建一个新的作用域，值设置为一个对象时，不会继承父级作用域。使用@符号指定与视图中的数据的绑定。
transclude ng-transclude
值为true时表示将页面自定义指令中的子元素添加到模板里带有 ng-transclude 属性的元素的下面
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../../Angular/angular.min.js"></script> </head> <body> <div sidebox title="Links"> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> </div> <div ng-controller="myController"> <div sidebox title="ttt"> <a href="">{{data}}</a> <a href="">ddddd</a> <a href="">dddd</a> <a href="">dddd</a> <a href="">ddddd</a> </div> </div> <script> angular.module("myApp",[]) .controller("myController",function($scope){ $scope.data = "大厨的笔记" }) .directive("sidebox",function(){ return{ restrict:"EA", scope:{ title:'@' }, transclude:true, template:'<div class="sidebox">' + ' <div>' + ' <h2>{{title}}</h2>' + ' <span ng-transclude>' +//把自定义指令里的代码放到带有ng-transclude指令的地方 ' </span>' + ' </div>' + '</div>' } }) </script> </body> </html>
controller
值是一个字符串表示在指定自定义指令的控制器字符串就是对应的控制器的名字，值还可以是一个函数，表示当前指令的一个匿名控制器。
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../../Angular/angular.min.js"></script> </head> <body> <div my-directive title="123333"> </div> <div chef-controller> </div> <script> angular.module("myApp",[]) //控制器 .controller("myController",function($scope){ $scope.data = "自定义指令的指定控制器" }) //自定义指令指定控制器的名字 .directive("myDirective",function(){ return{ restrict:'A', scope:{}, //指定自定义指令的控制器名字 controller:'myController', template:'<a>{{title}}</a><span>{{data}}</span>' } }) //指定自定义指令的匿名控制器 .directive("chefController",function(){ return{ restrict:"A", scope:{ title:'@' }, template:'<a>{{title}}</a>', //指令内部的匿名控制器 controller:function($scope){ $scope.title = "内部定义匿名控制器"; } } }) </script> </body> </html>
