Angular.JS中指令的参数有哪些
Angular.JS中指令的参数有哪些？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
成都创新互联公司专注于企业成都营销网站建设、网站重做改版、遂平网站定制设计、自适应品牌网站建设、HTML5、商城网站建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为遂平等各大城市提供网站开发制作服务。
指令的参数
angular.module('app', [])
.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(...) { ... }
}
};
});把它们分成三类：
描述指令或DOM本身特性的内部参数
连接指令外界、与其他指令或控制器沟通的对外参数
描述指令本身行为的行为参数
内部参数
restrict：String，E（元素） A（属性，默认值）
C（类名） M（注释）<--directive:my-directive expression-->priority: Number，指令执行优先级
template: String，指令链接DOM模板，例如“
{{head}}
”templateUrl:String，DOM模板路径
replace: Boolean，指令链接模板是否替换原有元素，
对外参数——scope
scope参数非常重要，本应该是放到最后说明的，但是scope却是理解其他参数的关键，所以务必先跟大家说清楚。
scope参数的作用是，隔离指令与所在控制器间的作用域、隔离指令与指令间的作用域。
scope参数是可选的，默认值为false，可选true、对象{}；
false：共享父域
true：继承父域，且新建独立作用域
对象{}：不继承父域，且新建独立作用域
false、true、{}三者对比
来看个例子
指令scope参数——false、true、{}对比测试
parent:
{{parentName}}
{{parentName}}
false参数
本质：子域与父域共享作用域。
特点：父域修改parentName的同时，指令绑定的parentName的元素会被刷新。
反之，指令内部parentName被修改时，父域的parentName同样会被刷新。
true参数
本质：子域继承父域，并建立独立作用域。
特点：
1、在指令已声明parentName的情况下，父域parentName变更，指令中parentName不会发生变化。
指令在true参数下，建立了的scope，独立并隔离与父控制器的scope。
controller: function ($scope) {
$scope.parentName = "parent";
}
反之，指令中parentName变更，父域也不会发生变化。
2、在指令未声明parentName的情况下，父域的parentName变更，指令中parentName也会刷新
这种情况很多时候会被忽略，指令的scope没有声明对象时，其元素绑定的仍然是父域的对象。但，一旦指令中Input变更了，对应的独立scope也会自动声明该绑定对象，这就回到了第1种情况。
controller: function ($scope) {
//$scope.parentName = "parent";
}
然而，指令中parentName变更，父域是不会变化的；
3、在指令已声明parentName的情况下 ，在指令中监听父域parentName 的变化无效。但监听子域parentName的变化有效
独立子域scope，只能监听自己的，不能监听父域的。但通过 $scope.$parent可以监听父域。
controller: function ($scope) {
$scope.parentName = "parent" ;
//已声明的情况下，$scope.$watch监听的是自己的parentName
$scope.$watch( 'parentName' , function (n, o) {
console.log("child watch" + n);
});
//$scope.$parent.$watch监听的是父域的parentName
$scope.$parent.$watch( 'parentName' , function (n, o) {
console.log("parent watch" + n);
});
}
4、在指令未声明parentName的情况下 ，在指令中监听父域parentName的变化有效。
这里就不解释了，参考第2点，大家可以动手试一下。
controller: function ($scope) {
//$scope.parentName = "parent";
//未声明的情况下，$scope.$watch监听的是父域的parentName
$scope.$watch('parentName' , function (n, o) {
console.log("child watch" + n);
});
}对象{}参数
本质：子域不继承父域，并建立独立作用域。
特点：
1、当scope对象为空对象时，无论是父域parentName，还是指令子域parentName发生变更，都不会影响到对方。
原理很清楚，就是指令建立的独立作用域，与父域是完全隔离的。
scope: {}
2、当scope对象为非空对象时，指令会将该对象处理成子域scope的扩展属性。而父域与子域之间传递数据的任务，就是可以通过这块扩展属性完成。
parent:
{{name}}
{{sexy}}
{{age}}
{{myName}}
{{mySexy}}
{{myAge}}
@（or @Attr）绑定策略——本地作用域属性，使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量。（单向引用父域对象）
ps：@ 是单向绑定本地作用域，记得加上{{}}
scope: {
myAge: '@',
}
= （or =Attr）绑定策略——双向绑定：通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就像普通的数据绑定一样，本地属性会反映出父数据模型中所发生的改变。（双向引用父域对象）
ps：=策略不需要加上{{}}进行绑定
scope: {
myName: '=',
}
& （or &Attr）绑定策略——通过&符号可以对父级作用域进行绑定，以便在其中运行函数。（调用父域函数）
ps：&对应的attrName必须以on-开头
scope: {
onSay: '&',
}父域绑定调用函数及传参
app.controller('parentCtrl', function ($scope) {
$scope.say = function (sth) {
alert(sth);
};
})
ps特别注意：@与=对应的attr，；
总结下来，scope扩展对象，既能够解耦父域与子域共域的问题，也能够实现指令与外界通讯的问题，是Angular开发指令化模块化的重要基础。在往后的章节，我会向大家介绍指令化开发的更多实例。
对外参数——require
scope是指令与外界作用域通讯的桥梁，而require是指令与指令之间通讯的桥梁。这个参数最大的作用在于，当要开发单指令无法完成，需要一些组合型指令的控件或功能，例如日期控件，通过require参数，指令可以获得外部其他指令的控制器，从而达到交换数据、事件分发的目的。
使用方法：require: String or Array——String值为引入指令名称，并且有两个寻找指令策略符号‘？'与‘^'；Array数组则为多个外部指令名称。
在link函数第4个参数ctrl中获取注入外部指令的控制器，如果require为String，ctrl为对象，如果require是数组，ctrl为数组。
require: '^teacher1',
link: function ($scope, $element, $attrs, ctrl) {
//ctrl指向teacher1指令的控制器
}？策略——寻找指令名称，如果没有找到，link函数第4个参数为null；如果没有？，则报错。
^ 策略——在自身指令寻找指令名称的同时，向上父元素寻找；如果没有^，则仅在自身寻找。
如下例子，指令studentA向上可以找到指令teacher及自身，但是不能找到相邻兄弟的student-b。
