在运用angularjs的时刻，运用自定义指令可以写一些组件，异常轻易。这里给人人分享一些关于angular自定义指令的学问。
1. 定义
关于指令，可以把它简朴的明白成在特定DOM元素上运转的函数，指令可以扩大这个元素 的功用。
2.定义指令的要领：
angular.module('myApp', [])
.directive('myDirective', function ($timeout, UserDefinedService) {
// 指令定义放在这里
}); 第一个参数，指令的名字myDirective 用来在视图中援用特定的指令。
第二个参数是一个函数，这个函数返回一个对象，$compile效劳运用这个要领返回的对 象，在DOM挪用指令时来组织指令的行动。
3.指令设置的选项
angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: String,
priority: Number,
terminal: Boolean,
template: String or Template Function:
function(tElement, tAttrs) (...},
templateUrl: String,
replace: Boolean or String,
scope: Boolean or Object,
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,
require: String,
link: function(scope, iElement, iAttrs) { ... },
compile: // 返回一个对象或衔接函数，以下所示：
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
// 或许
return function postLink(...) { ... }
}
}; }); restrict 指令在DOM中可以何种情势被援用或声明
可选值以下： （ 可组合运用 ）E（元素） <my-directive></my-directive>
A（属性，默许值） <div my-directive=”expression”></div>
C（类名） <div class=”my-directive:expression;”></div>
M（解释） <–directive:my-directive expression–>priority 优先级 用来示意指令运用的优先递次
假如一个元素上具有两个优先级雷同的指令，声明在前面的谁人会被优先挪用。假如个中一 个的优先级更高，则不论声明的递次怎样都会被优先挪用：具有更高优先级的指令老是优先运转。terminal 用来通知AngularJS住手运转当前元素上比本指令优先级低的指令。但同当前指令 优先级雷同的指令照样会被实行。
<div ng-app="myApp" ng-controller="myCtr"> <!--此处在div上运用了两个自定义指令，作为属性存在，但directiveOne优先级高，而且设置了terminal属性，所以directiveSec指令并不会实行--> <div directive-Sec directive-One> 这是自定义指令 </div> </div> var myCtr=["$scope",function($scope){}] var app=angular.module("myApp",[]); app.controller("myCtr",myCtr); app.directive("directiveOne",function(){ return { restrict: "ECMA", priority: 2, terminal: true, template:function(tElement, tAttrs){ tElement[0].style.fontSize="18px"; //设置字体 } } }); app.directive("directiveSec",function(){ return { restrict: "ECMA", priority: 1, template:function(tElement, tAttrs){ tElement[0].style.color="red"; //设置色彩 } } });template
用来示意模板，可以是一段字符串，如“<h1>这是自定义指令</h2>”,也可以是一个函数，可以参考上面的例子template:function(tElement, tAttrs){ //tElement示意当前元素，是一个数组，tAttrs示意该元素的属性，是一个对象 tElement[0].style.color="red"; //设置色彩 }templateUrl 用来示意模板，与上面的template功用类似，但示意途径，可以是外部HTML文件途径的字符串也可以是一个可以接收两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件 途径的字符串。
replace 默以为false，模板会被看成子元素插进去到挪用此指令的元素内部，为true，则直接替代此元素
<div some-directive></div> .directive('someDirective', function() { return { template: '<div>some stuff here<div>' }; }); <!-- 挪用指令以后的结果以下（这是默许replace为false时的状况）： --> <div some-directive> <div>some stuff here<div> </div> <!-- 假如replace被设置为了true： --> .directive('someDirective', function() { return { replace: true // 修饰过 template: '<div>some stuff here<div>' }; }); <!-- 指令挪用后的结果将是： --> <div>some stuff here<div>scope
（1）当scope设置为true时，会从父作用域继续并建立一个新的作用域对象。 （2） 默以为false，并不会建立新的作用域对象，直接运用父scope。 （3）设置为{}，示意断绝作用域，指令的 模板就无法访问外部作用域了var myCtr=["$scope",function($scope){ $scope.name="father controller！！" }] var app=angular.module("myApp",[]); app.controller("myCtr",myCtr); app.directive("directiveOne",function(){ return { restrict:"ECMA", template: '<div>这是自定义指令{{name}}<div>', scope:{}, controller:function($scope){ console.log($scope.name);//打印出来为undefined，由于无法访问尾部作用域了 } } });固然，AngularJS供应了几种要领可以将指令内部的断绝作用域，同指令外部的作用域举行数据绑定。 （a）@ (or @attr) 单向绑定，外部scope可以影响内部scope，但反过来不成立<body> <div ng-app="myApp" ng-controller="myCtr"> <input type="" name="" ng-model="value"> <!-- 注重此处的svalue要写成s-Value，不然没结果--> <directive-One s-Value="{{value}}"> </directive-One> </div> <!-- --> </body> <script type="text/javascript"> var myCtr=["$scope",function($scope){ $scope.value=""; }] var app=angular.module("myApp",[]); app.controller("myCtr",myCtr); app.directive("directiveOne",function(){ return { restrict:"ECMA", template: '<div>这是自定义指令<input type="" name="" ng-model="sValue">{{sValue}}<div>', scope:{ sValue:"@" }, controller:function($scope){ $scope.sValue=""; console.log($scope.sValue); } } }); </script>（b）= (or =attr) 双向绑定，外部scope和内部scope的model可以互相转变<body> <div ng-app="myApp" ng-controller="myCtr"> <input type="" name="" ng-model="value"> <!-- = 前面的value示意自定义指令本身的属性名，背面的value示意父作用域的value --> <directive-One value="value"> </directive-One> </div> </body> <script type="text/javascript"> var myCtr=["$scope",function($scope){ $scope.value="1"; }] var app=angular.module("myApp",[]); app.controller("myCtr",myCtr); app.directive("directiveOne",function(){ return { restrict:"ECMA", template: '<div>这是自定义指令<input type="" name="" ng-model="value">{{value}}<div>', scope:{ value:"=" }, controller:function($scope){ $scope.value=""; console.log($scope.value); } } }); </script>![图片形貌][1] 上面的输入框输入，下面会变，下面的输入框输入上面的也会变 （c）& (or &attr) 把内部scope的函数的返回值和外部scope的任何属性绑定起来controller
controller参数可以是一个字符串或一个函数。当设置为字符串时，会以字符串的值为名字， 来查找注册在运用中的控制器的组织函数.当为函数时，可以像日常平凡写控制器那样写，可以将恣意可以被注入的AngularJS效劳传递给控制器controllerAs（字符串）
controllerAs参数用来设置控制器的别号，可以以此为名来宣布控制器，而且作用域可以访 问controllerAs。如许就可以在视图中援用控制器，以至无需注入$scope。require
require参数可以被设置为字符串或数组，字符串代表别的一个指令的名字。require会将控 制器注入到其值所指定的指令中，并作为当前指令的链接函数的第四个参数。
字符串或数组元素的值是会在当前指令的作用域中运用的指令称号。
