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. delphi 改变闪动光标

    delphi 改变闪动光标 // 不同风格的光标 procedure TForm1.Edit1MouseDown(Sender: TObject; Button: TMouseButton;Shift ...

  2. cf100989b

    http://codeforces.com/gym/100989/my B. LCS (B) time limit per test 0.25 seconds memory limit per tes ...

  3. po dto vo bo

    DozerBeanMapper是JavaBean的映射工具,可以进行对象之间相同属性名赋值     关于PO.DTO.VO在分层模型之间的关系:首先在持久层由DAO访问数据库将数据对象封装成PO,然后 ...

  4. CSS3 Loading进度条加载动画特效

    在线演示 本地下载

  5. 20162305李昱兴 2016-2017-2 《Java程序设计》第2周学习总结

    20162305 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 教材的第二章以数据和表达式为主.在第二章的学习中,我了解了print以及println的用法 ...

  6. 【原创】无线破解Aircrack-ng套件详解(一)－－airmon-ng与airodump-ng

    一:Aircrack-ng详解 1.1 Aircrack-ng概述 Aircrack-ng是一款用于破解无线802.11WEP及WPA-PSK加密的工具,该工具在2005年11月之前名字是Aircra ...

  7. GCD汇总

    //总结如下: //1.同步请求:不会开启新的线程 //1-1.同步请求--串行队列:不开启新线程--按照顺序执行下去 //1-2.同步请求--并发列队:不开启新线程--按照顺序执行下去 //2.异步 ...

  8. eclipse文档字体大小设置

    步骤如下

  9. scala学习手记14 - 单例对象

    java中的单例模式都很熟悉了:简单地说就是一个类只能有一个实例.在scala中创建单例对象非常简单,创建类时使用object关键字替换class即可.因为单例类无法初始化,所以不能向它的主构造函数传 ...

  10. node 模块部分介绍

    chai  断言框架 mocha mochawesome  对mocha 定制报告,生成完整成熟的报告. node-fetch  服务器版fetch superagent  是node 客户端请求代理 ...