angularjs自定义指令

自定义指令简单介绍及使用

• 自定义指令无外乎增强了HTML,提供了额外的功能。

• 内部指令基本能满足我们的需求。

• 少数情况下我们有一些特殊的需要，可以通过自定义指令的方式实现：

• 通过 模块对象的directive方法创建

  • 有两个参数，第一个参数，是指令的名字：必须是驼峰命名法命名
    第二个参数和控制器的第二个参数一样,在第二个参数的function里直接返回的一个obj对象
  • 使用时：需要将指令的名字转成小写，并以-分割原先在大小写字母

自定义指令中回函数里返回的对象的属性

• template:需要一个字符串，最终这个字符串值被被添加到自定义指令所在标签的innerHTML位置

• templateUrl:需要一个字符串，这个字符串是一个文本文件的路径,anuglar最终会异步请求这个文件，把拿到的内容插入到自定义指令所在的标签的innerHTML位置,
  该字符串也可以是script标签的id值，把script标签中的内容当作模板字符串来使用
  注意：script的type属性需要为"text/ng-template"

• restrict:也是需要一个字符，可以是A,E,C,M 这4个字符中任何一个，也可以任意的组合，A:以属性的形式使用，E:以自定义标签的形式使用，C:表示以类样式名的形式使用，M:以注释的形式使用

• replace: 需要一个布尔值，为true,会将自定义指令所在的标签替换为模板字符串。

• transclude:转置，是需要一个布尔值，为true时会把自定义指令所在标签的innerHTML值添加到模板字符串中，需要与ng-transclude指令配合使用，ng-transclude指令需要将值插入到哪个元素的innerHTML位置.不能与replace指令同用。

• scope:需要一个对象，可以获取到自定义指令所在标签的属性值：
  {
  属性名:'@test', 属性值需要以@开头,@后面是自定义指令所在标签的属性名，最终在模板字符串中通过表达式可以使用scope的属性名可以直接输出

    test:'@'// 是简写方式
  

  }

• link:指向一个function，这个function有三个参数：

  • scope: 类似于控制器中的$scope,也可以暴露一些值。
  • element:这是一个jqLite对象，是自定义指令所在标签的jqLite对象
  • attributes:是自定义指令所在标签的所以属性的集合.