1、创建和使用
var app = angular.module('myApp',['ng']);
app.directive('指令名称',func);

自定义指令的命名：
驼峰式，有两部分构成，前缀一般是公司或者项目的缩写，后缀表示的为指令的作用(tsHello)
使用指令时：采用烤串式的方式去使用
(ts-hello)

2、高级

属性：
①template 显示的模板内容
②restrict: 'EACM' (E:元素A:属性C:类M：注释)
作为注释去调用自定义指令时，需要设置replace属性为true
③replace 替换
④scope：接收参数

<!DOCTYPE html>

<html ng-app="myModule">

<head lang="en">

  <meta charset="UTF-8">

  <script src="js/angular.js"></script>

  <title></title>

</head>

<body>

<!--控制器的调用-->

<div ng-controller="myCtrl">

  <!-- element-->

  <ts-hello></ts-hello>

  <!-- attribute-->

  <div ts-hello></div>

  <!-- class-->

  <div class="ts-hello"></div>

  <!-- directive: ts-hello -->

</div>

<script>

  //模块的创建

  var app = angular.module('myModule',['ng']);

  //创建控制器

  app.controller('myCtrl', function ($scope) {

  })

  //创建自定义指令

  app.directive('tsHello', function () {

    return {

      template:'<h1>Hello Directive</h1>',

//      E:Element A:Atrribute C:Class M:Comment

      restrict:'EACM',

      replace:true

    }

  })

</script>

</body>

</html>

3.调用指令来传递参数并处理：

①在自定义的指令内部去准备接收
指定scope，把要传递过来的值存在驼峰式命名的变量中，指定@，在调用指令传参时，就会读取该属性对应的值
scope:{
testName:'@'
}
②传递参数
在调用指令时，指定对应的属性名称和要传递的值
<div test-hello test-name="123"></div>

<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

  <meta charset="UTF-8">

  <script src="js/angular.js"></script>

  <title></title>

</head>

<body>

<div ng-controller="myCtrl">

  <div ts-hello test-name="world"></div>

</div>

<script>

  var app = angular.module('myApp', ['ng']);

//  创建指令并传参

  app.directive('tsHello', function () {

    return {

      template:'<span> ' +

      'Hello {{testName}}</span>',

      scope:{

        testName:'@'

      }

    }

  })

  app.controller('myCtrl', function () {

    console.log('myCtrl  func is called');

  })

</script>

</body>

</html>
<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

  <meta charset="UTF-8">

  <script src="js/angular.js"></script>

  <title></title>

</head>

<body>

<div ng-controller="myCtrl">

</div>

<!--调用指令，并通过属性传参-->

<ts-directive ts-name="Hello World"></ts-directive>

<script>

  var app = angular.module('myApp', ['ng']);

  //创建指令

  app.directive('tsDirective', function () {

    return{

      template:'<h1>{{tsName}}</h1>',

      scope:{

        tsName:'@'//@取ts-name属性对应的值

      }

    }

  })

  app.controller('myCtrl', function () {

    console.log('myCtrl  func is called');

  })

</script>

</body>

</html>

ng 指令的自定义、使用的更多相关文章

  1. Angular中的内置指令和自定义指令

    NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...

  2. VUE：内置指令与自定义指令

    VUE:内置指令与自定义指令 常用的内置指令 1)v:text 更新元素的 textContent 2)v-html 更新元素的 innerHTML 3)v-if 如果为true,当前标签才会输出到页 ...

  3. Vue自定义指令和自定义过滤器

    一.自定义指令: 自定义指令分为两种:全局自定义指令和局部自定义指令 全局指令指所有组件都可以使用,局部指令是只有在当前组件中才可以使用. 如,我们现在有个需求,当一个输入框获取焦点时,显示出一个di ...

  4. angularjs中常用的ng指令介绍【转载】

    原文:http://www.cnblogs.com/lvdabao/p/3379659.html 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下四种: 指令(directive).ng提 ...

  5. AngularJS -- 指令(创建自定义指令)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/   什么是指令 注:本指南是针对已经熟悉AngularJS基础知识的开发人员.如果你才刚 ...

  6. [译]ng指令中的compile与link函数解析 转

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...

  7. ng指令之 ng-class 篇

    1>定义和用法 ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类.ng-class 指令的值可以是字符串,对象,或一个数组. 如果是字符串,多个类名使用空格分隔. 如果 ...

  8. 必须正确理解的---ng指令中的compile与link函数解析

    这个绝对是深入的知识,但看完之后,对NG的理解就很利害啦. http://www.ifeenan.com/angularjs/2014-09-04-%5B%E8%AF%91%5DNG%E6%8C%87 ...

  9. nginx log_format指令记录自定义响应头

    我们用的nginx有做过一些定制开发,为了调试方便,加了一些自定义的response header,那么如何把这个自定义头记录到日志中以便于观察呢? nginx log_format指令支持这种扩展, ...

随机推荐

  1. day5笔记 列表 list 增删改查

    列表的使用 一.索引和切片 # 索引和切片,用法与字符串一样 l = [1,2,3,'af','re',4,'45'] print(l[0]) print(l[3]) print(l[-1]) # ' ...

  2. Delphi 正则表达式语法(9): 临界匹配 - 也叫"预搜索"与"反向预搜索"

    Delphi 正则表达式语法(9): 临界匹配 - 也叫"预搜索"与"反向预搜索" //匹配右边 var   reg: TPerlRegEx; begin   ...

  3. jmeter之报告和分析

    转载:http://www.cnblogs.com/miaomiaokaixin/p/6118081.html jmeter -n -t 脚本名字.jmx -l xxx.jtl -e -o 指定目录( ...

  4. 用VS2013编译FFMPEG232

    http://blog.csdn.net/finewind/article/details/38854517 如果只是拿来使用,网上有现成的SDK.但我是想深入研究FFMPEG代码,又不熟悉Linux ...

  5. 【Java】流与文件（端口 & 文件读写对象）

    概述: 1.input和output是相对于内存而言的.输入(input)就是写入到内存里,输出(output)就是把内存里的东西写到外面. 2.操作内存里的东西非常便利,要么声明变量,要么new对象 ...

  6. React Native常用组件之ScrollView组件

    一.前言 从iOS开发的经验来看,scrollView无疑是移动开发中很重要的一个组件,比如后面会学到的ListView就是继承自它.那么,在开发中比如:焦点图.引导页等地方都有其的影子,那接下来我们 ...

  7. Eclipse使用Maven搭建Java Web项目并直接部署Tomcat

    1.环境: Windows 10 Java 1.8 Maven 3.3.9 Eclipse IDE for Java EE Developers 2.准备: eclipse环境什么的不赘述,Maven ...

  8. java中Hashtable集合的常用方法

    实现Map集合的方法这里就不在讲了 https://www.cnblogs.com/xiaostudy/p/9510763.html public Object clone() 返回Hashtable ...

  9. U盘安装XP

    ZC: 第1阶段结束 进入第2阶段 的时候,还是需要手动选择USB启动 (如果没有修改BIOS为USB启动的话) ZC: 我用的 WinSetupFromUSB,是文章尾部的那个版本的软件界面. ZC ...

  10. scala学习手记28 - Execute Around模式

    我们访问资源需要关注对资源的锁定.对资源的申请和释放,还有考虑可能遇到的各种异常.这些事项本身与代码的逻辑操作无关,但我们不能遗漏.也就是说进入方法时获取资源,退出方法时释放资源.这种处理就进入了Ex ...