1.angularJs中提供了很多内置指令,它还有很强大的功能就是自定义指令
指令:我们可以理解为在特定DOM上运行的函数,指令可以控制这个元素的功能,正是指令使得angularJs这个框架变得强大
我们可以用directive()这个方法用来定义指令
directive()指令可以接受两个参数
1> name(字符串)指令的名字 用来在视图中引用特定的指令
2>factory_function(函数) :这个函数返回的是一个对象,其中定义了指令的全部行为.
2.定义指令行为的相关属性 键值对
angular.module('myApp', [])
.directive('myDirective', function() {
return {
//它告诉AngularJS这个指令在DOM中可以何种形式被声明 默认是是A 以属性的形式进行声明
restrict: String,
priority: Number,//优先级
terminal: Boolean,//这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令
template: String or Template Function: //一段HTML文本；
function(tElement, tAttrs) (...},
templateUrl: String,//用于将’其他html’文件渲染进入含有对应指令的html中。当然这里的’其他html’里面可以有我们的指令或者表达式，其实就是代码段，和在当前页面一 样使 用，只是抽离出去了，方便管理。这里会用异步请求的方式来得到这个文件。注意：此处会发送一个xhr请求。
replace: Boolean or String,//，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部：
scope: Boolean or Object, 比如scope :true 如果为true 则指令模板可以访问外部作用域的 或 scope :{} 这样指令模板无法访问外部作用域 主要因为隔离作用域的原因
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,可以给controller 起个别名简化操作
require: String,require参数可以被设置为字符串或数组，字符串代表另外一个指令的名字。require会将控制器注入到其值所指定的指令中，并作为当前指令的链接函数的第四个参数。
link: function(scope, iElement, iAttrs) { ... },//进行DOM 操作
compile: // 返回一个对象或连接函数，如下所示：
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
// 或者
return function postLink(...) { ... }
3.
<!DOCTYPE html> <!-- 这里是初试化anglularJs 的一个应用程序 --> <html> <head> <meta charset="UTF-8"> <title>初识自定义指令</title> <script type="text/javascript" src="js/angular-1.3.0.js"></script> </head> <body> <div ng-app="myApp"> <div ng-include="child.html"></div> <div my-info name="names" add="changeData(name)" ></div> </div> </body> <script type="text/javascript"> //在自定义标签中定义行为 angular.module('myApp') .directive('myInfo', function(){ return { restrict: 'EA', //E表示element, A表示attribute,C表示class，M表示commnent,即注释 scope:{ name: '@' //@读属性值，=双向绑定，&用户函数 add:'&'//允许外部scope传递一个函数给封闭的scope } template: '<div>{{ name }}</div>'+'<button ng-click="action()">Change Data</button>', templateUrl: 'app/sample.html', controller: function($scope){ $scope.changeData=function(){ //调用外部的scope的函数 var name="good data"; //给函数传参 $scope.add({name:name }); } }, link:function($scope, element, attrs){}//DOM操作 }; }) //注意 默认情况下,自定义的directive是共享父scope,但是有时候我们希望自定义的directive的scope是封闭的,独立的 //比如下网自定的directive用在多处. // 1.使用@,外部赋值不影响封闭scope的变量 // 2.使用=,外部scope赋值会影响封闭scope变量 // 3.使用&，允许外部scope传递一个函数给封闭scope 这个函数还可以传入相应的参数 // 4.允许自定义的directive被嵌套 要把tranclude设置为true就可以了. </script> </html>