angular自定义指令

var app = angular.module("app",[]);
//第一个参数:指令的名称,使用驼峰命名
//第二个参数:回调函数,回调函数内部返回对象
app.directive("hiHello",function () {
        return {
        //执行的代码,参数,写在这里
        }
});

directive的参数

restrict : String

设置自定义指令的html格式

restrict的取值表
| E| C | M | A |
|:---------------:|:------:|
| element | attribute | class | 注释 |


    
    若其中有内容,则被替换掉
    
    

replace : Boolean or String

(布尔型)默认为false(模板内容会加载到标签内部),true(模板内容会替换当前标签),即是否替换当前元素中已有的内容

replace:true,
注意:如果使用M,必须得配合使用 replace(替换)
###priority : Number

优先级,可忽略,默认为0

注意: ng-repeat 的优先级为1000,这样就可以保证在同一元素上,它总是在其他指令之前被调用
###terminal : Boolean

如果为false,则Angular停止运行当前元素上比本指令优先级低的指令。优先级相同的指令还是会被执行

注意: ng-if 的优先级略高于 ng-view
priority和terminal的综合运用

    
        
Hello World!!!

template : String or Template Function

设置模板,必须设置

template:"

随便写的信息

", //template:function(tElement, tAttrs){...}, ###templateUrl: String

(字符串或函数)

外部路径的字符串
接受两个参数的函数,参数为 tElement 和 tAttrs ,并返回一个外部HTML文件路径的字符串
模板加载后,AngularJS会将它默认缓存到$templateCach服务中。

注意:templateUrl 可以提前加载模块到缓存中,提高加载速度
templateUrl : "html/first.html",
###scope: Boolean or Object

当一个控制器实现多个数据时,就需要用到scope属性实现不同的数据。如果要创建一个能够从外部原型继承作用域的指令,将 scope 属性设置为 true

scope属性的独立作用域

为true时,从父作用域继承并创建一个自己的作用域
为false(默认)时,全部继承父作用域
1).controller属性
配置属于每个指令自己作用域上的数据(共有),而ng-controller 的作用就是从父级作用域继承并创建一个新的子作用域。

controller : function($scope){
      $scope.age = 20
}

设置为一个对象,则能设置 隔离作用域, scope 属性设置为一个空对象 {} 。如果这样做了,指令的模板就无法访问外部作用域了,代码如下:

directive('myDirective', function() {
      return {
              restrict: 'A',
              scope: {},
              priority: 100,
              template: '
Inside myDirective {{ myProperty }}
' }; });

隔离作用域

将scope属性设置为一个对象,而不是布尔值。隔离作用域默认和父作用域没关系,无法继承它的属性

1). 设置模板中数据的作用域和绑定规则:
|@| = |&|
|:---------------:|:------:|
| 把当前属性作为字符串传递 |与父作用域中的属性进行绑定素|与父作用域中的函数进行绑定|

"@" : 本地作用域属性:使用当前指令中的数据和DOM属性的值进行绑定
“=” : 双向绑定:本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。
“&” : 父级作用域绑定:通过 & 符号可以对父级作用域进行绑定

scope : {
        name : "@"  //属性和标签内的属性写一样
}
scope: {
      ngModel: '=', // 将ngModel同指定对象绑定
      onSend: '&', // 将引用传递给这个方法
      fromName: '@' // 储存与fromName相关联的字符串
}

transclude: Boolean

默认为false,需要创建一个可以包含任意内容的指令时, 才使用 transclude: true 。

注意:只要使用了 transclude 参数,那么在控制器(下面马上会介绍)中就无法正常监听数据模型的变化了

controller: String or function

controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... }

注册在应用中的控制器的构造函数,使用函数创建内联控制器

angular.module('myApp',[]).directive('myDirective', function() {
             restrict: 'A',
            controller:function($scope, $element, $attrs, $transclude) {
                  // 控制器逻辑放在这里
            }
})

controllerAs: String

可以在指令中创建匿名控制器

angular.module('myApp',[]).directive('myDirective', function() {
          return {
                  restrict: 'A',
                  template: '

{{ myController.msg }}

', controllerAs: 'myController', controller: function() { this.msg = "Hello World" } }; });

require: String

(字符串或数组)字符串代表另外一个指令的名字,如果没有前缀,指令将会在自身所提供的控制器中进行查找,如果没有找到任何控制器(或具有指定名字的指令)就抛出一个错误。例如:

如果不使用 ^ 前缀,指令只会在自身的元素上查找控制器。
require: 'ngModel'
使用 ? 如果在当前指令中没有找到所需要的控制器,会将 null 作为传给 link 函数的第四个参数
require: '?ngModel'
使用 ^ 如果添加了 ^ 前缀,指令会在上游的指令链中查找 require 参数所指定的控制器。
require: '^ngModel'
使用 ^? 将前面两个选项的行为组合起来,我们可选择地加载需要的指令并在父指令链中进行查找。
require: '^?ngModel',

link和compile

link: link: function(scope, iElement, iAttrs) { ... },
compile: compile: function(tElement, tAttrs, transclude) { ... },

compile 选项本身并不会被频繁使用,但是 link 函数则会被经常使用。当我们设置了 link 选项, 实际上是创建了一个 postLink() 链接函数, 以便 compile() 函数可以定义链接函数。
compile 和 link 选项是互斥的。如果同时设置了这两个选项,那么会把 - compile所返回的函数当作链接函数,而 link 选项本身则会被忽略。
通常情况下,如果设置了 compile 函数,说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作,在这个函数中进行诸如添加和删除节点等DOM操作是安全的。
//用 link 函数创建可以操作DOM的指令。

require  : 'SomeController',
link: function(scope, element, attrs, SomeController) {
         // 在这里操作DOM,可以访问required指定的控制器
}
compile: function(tElement, tAttrs, transclude) {  
        return {
            pre: function(scope, iElement, iAttrs, controller) { ... },
            post: function(scope, iElement, iAttrs, controller) { ... }
        }
        // 或者
        return function postLink(...) { ... }
    }
};

注意:指令的生命周期开始于 $compile 方法并结束于 link 方法

你可能感兴趣的:(angular自定义指令)