angular自定义指令－directive

Directive到底是个怎么样的一个东西呢？我我的的理解是这样的：将一段html、js封装在一块儿，造成一个可复用的独立个体，具体特定的功能。下面咱们来详细解读一下Directive的通常性用法。

var myDirective = angular.module('directives', []);

myDirective.directive('directiveName', function($inject) {
 return {
 template: '<div></div>',
 replace: false,
 transclude: true,
 restrict: 'E',
 scope: {},
 controller: function($scope, $element) {

 },
 complie: function(tElement, tAttrs, transclude) {
 return {
 pre: function preLink(scope, iElement, iAttrs, controller) {

 },
 post: function postLink(scope, iElement, iAttrs, controller) {

 }
 };
 },
 link: function(scope, iElement, iAttrs) {

 }
 };
});
这里直接return了一个object，对象中包括比较多的属性，这些属性都是对自定义directive的定义。

• name
  表示当前scope的名称，通常声明时使用默认值，不用手动设置此属性。
• priority
  优先级。当有多个directive定义在同一个DOM元素上时，有时须要明确他们的执行顺序。这个属性用于在directive的compile function调用以前进行排序。若是优先级相同，则执行顺序是不肯定的（根据经验，优先级高的先执行，相同优先级时按照先绑定后执行）。
• teminal
  最后一组。若是设置为true，则表示当前的priority将会成为最后一组执行的directive，即比此directive的priority更低的directive将不会执行。同优先级依然会执行，可是顺序不肯定。
• scope
  • true
    将为这个directive建立一个新的scope。若是在同一个元素中有多个directive须要新的scope的话，它仍是只会建立一个scope。新的做用域规则不适用于根模版，由于根模版每每会得到一个新的scope。
  • {}
    将建立一个新的、独立的scope，此scope与通常的scope的区别在于它不是经过原型继承于父scope的。这对于建立可复用的组件是颇有帮助的，能够有效的防止读取或者修改父级scope的数据。这个独立的scope会建立一个拥有一组来源于父scope的本地scope属性hash集合。这些本地scope属性对于模版建立值的别名颇有帮助。本地的定义是对其来源的一组本地scope property的hash映射。
• controller
  controller构造函数。controller会在pre-linking步骤以前进行初始化，并容许其余directive经过指定名称的require进行共享。这将容许directive之间相互沟通，加强相互之间的行为。controller默认注入了如下本地对象：
  • $scope 与当前元素结合的scope
  • $element 当前的元素
  • $attrs 当前元素的属性对象
  • $transclude 一个预先绑定到当前scope的转置linking function
• require
  请求另外的controller，传入当前directive的linking function中。require须要传入一个directive controller的名称。若是找不到这个名称对应的controller，那么将会抛出一个error。名称能够加入如下前缀：
  • ? 不要抛出异常。这将使得这个依赖变为一个可选项
  • ^ 容许查找父元素的controller
• restrict
  EACM的子集的字符串，它限制了directive为指定的声明方式。若是省略的话，directive将仅仅容许经过属性声明
  • E 元素名称：
  • A 属性名：
     
  • C class名：
     
  • M 注释：
• template
  若是replace为true，则将模版内容替换当前的html元素，并将原来元素的属性、class一并转移；若是replace为false，则将模版元素看成当前元素的子元素处理。
• templateUrl
  与template基本一致，但模版经过指定的url进行加载。由于模版加载是异步的，全部compilation、linking都会暂停，等待加载完毕后再执行。
• replace
  若是设置为true，那么模版将会替换当前元素，而不是做为子元素添加到当前元素中。（为true时，模版必须有一个根节点）
• transclude
  编译元素的内容，使它可以被directive使用。须要在模版中配合ngTransclude使用。transclusion的有点是linking function可以获得一个预先与当前scope绑定的transclusion function。通常地，创建一个widget，建立独立scope，transclusion不是子级的，而是独立scope的兄弟级。这将使得widget拥有私有的状态，transclusion会被绑定到父级scope中。（上面那段话没看懂。但实际实验中，若是经过调用myDirective，而transclude设置为true或者字符串且template中包含的时候，将会将的编译结果插入到sometag的内容中。若是any的内容没有被标签包裹，那么结果sometag中将会多了一个span。若是原本有其余东西包裹的话，将维持原状。但若是transclude设置为’element’的话，any的总体内容会出如今sometag中，且被p包裹）
  • true/false 转换这个directive的内容。（这个感受上，是直接将内容编译后搬入指定地方）
  • ‘element’ 转换整个元素，包括其余优先级较低的directive。（像将总体内容编译后，看成一个总体（外面再包裹p），插入到指定地方）
• compile
  这里是compile function，将在下面实例详细说明
• link
  这里是link function ，将在下面实例详细讲解。这个属性仅仅是在compile属性没有定义的状况下使用。

参考地址：http://blog.gejiawen.com/2014/07/16/usage-for-angularjs-directive/

先上指令的模板。能够看出，指令包含一个输入框一个下拉选择框。

 

指令的逻辑部分：

 参考地址：http://blog.gejiawen.com/2015/12/20/using-ng-model-controller-with-angular-directive/?utm_source=tuicool&utm_medium=referral