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. day4-迭代器、生成器yield

    一.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退.另外,迭代器的一大优 ...

  2. SqlAlchemy基本

    安装SQLAlchemy: $ easy_install sqlalchemy 数据库表是一个二维表,包含多行多列 [ ('1', 'Michael'), ('2', 'Bob'), ('3', 'A ...

  3. Flask 请求源码分析

    执行app.run()方法: def run(self, host=None, port=None, debug=None, **options): from werkzeug.serving imp ...

  4. python全栈开发从入门到放弃之列表的内置方法

    1.列表切片 l=['a','b','c','d','e','f'] print(l[1:5]) # 根据索引号来切片,但顾头不顾尾 ['b', 'c', 'd', 'e'] print(l[1:5: ...

  5. Ubuntu安装及一些初始操作

    目录 使用Universal-USB-Installer安装Ubuntu Ubuntu连接无线网络 Windows与Ubuntu双系统时间不一致解决办法 Ubuntu安装Sublime Text 3 ...

  6. maven打包生成war

  7. 28. Implement strStr()(KMP字符串匹配算法)

    Implement strStr(). Return the index of the first occurrence of needle in haystack, or -1 if needle ...

  8. 使用curl 命令模拟POST/GET请求

    https://blog.csdn.net/u012340794/article/details/71440604 curl命令是一个利用URL规则在命令行下工作的文件传输工具.它支持文件的上传和下载 ...

  9. 一般处理程序中 C#中对象转化为Json对象

    namespace: Newtonsoft.Json; context.Response.ContentType = "application/text"; 注:这里为什么不是 J ...

  10. 物理机内存模型与java内存模型

    多线程缓存一致性问题 程序在运行过程中,会将运算需要的数据从主存复制一份到CPU的高速缓存当中,那么CPU进行计算时就可以直接从它的高速缓存读取数据和向其中写入数据,当运算结束之后,再将高速缓存中的数 ...