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. poj1694

    /*给出一棵树的描述 第一行输入t,代表案例的个数 第二行一个n代表这棵树有n个节点 接下来n行第一个数是节点的编号,根节点编号为1,然后第二个数是节点的个数,如果为0那就没子节点,否则输入节点的 编 ...

  2. Forward Proxy vs Reverse Proxy

    Overview We've talked about reverse proxy servers and how they can really be good at protecting the ...

  3. 【Flask】Flask Restful api

    ### 安装: Flask-Restful需要在Flask 0.8以上的版本,在Python2.6或者Python3.3上运行.通过pip install flask-restful即可安装. ### ...

  4. CF932E Team Work(第二类斯特林数)

    题目 CF932E Team Work 前置:斯特林数\(\Longrightarrow\)点这里 做法 \[\begin{aligned}\\ &\sum\limits_{i=1}^n C_ ...

  5. Boot-Repair&usb_repair

    https://help.ubuntu.com/community/Boot-Repair https://askubuntu.com/questions/500647/unable-to-mount ...

  6. 函数：生成1-n的随机数组，

    方法很笨,不过可行: #include <stdio.h> /** 功能:获取一个1-n的随机数数组,这些随机数都互不相同 ** 入参:n-表示最大随机数: *randArray -用于储 ...

  7. COS-2OS结构和硬件支持

    操作系统(Operating System,简称OS),是电子计算机系统中负责支撑应用程序运行环境以及用户操作环境的系统软件,同时也是计算机系统的核心与基石.它的职责常包括对硬件的直接监管.对各种计算 ...

  8. 混合开发的大趋势之 一个Android程序员眼中的 React.js 箭头函数,const, PropTypes

    转载请注明出处:王亟亟的大牛之路 昨天写了篇React.js的开头之作,讲了讲块级作用域和let,先安利:https://github.com/ddwhan0123/Useful-Open-Sourc ...

  9. asp.net Core 部署到CentOs7上，使用Nginx做代理

    一.CentOs7部署Nginx 1.准备工作 Nginx的安装依赖于以下三个包,意思就是在安装Nginx之前首先必须安装一下的三个包,注意安装顺序如下: 1 SSL功能需要openssl库,直接通过 ...

  10. 关于ENABLE_BITCODE

    pod 'TSVoiceConverter' 如果,设置了工程target的ENABLE_BITCODE为NO.但是,在真机上运行时,仍然提示类似于如下错误: URGENT: all bitcode ...