指令　　

概述：

　　前面也说过一些常用指令，用于快速入门。现在详细总结一下：指令用于实现各种页面的操作，是对于底层DOM操作的封装，扩展了HTML的行为，实现页面交互以及数据绑定。

　　指令是一种执行的信号，一旦发布了指令，就要执行某项动作。就像我们军训的时候，一个口令一个动作。而常用的指令是固定的，如果我们有一些特殊的需要，这时候要自定义指令，没有条件就要自己创造条件嘛。

基本语法：　

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

　　app.directive(name,fn);

　　其中，name是指令名称，使用驼峰命名法。fn是一个函数，它将返回一个对象，在这个对象中，定义了这个新增指令的全部行为。fn返回一个对象，该对象包含几个特有的属性：restrict（指定自定义指令的使用方法AECM），template（该指令实际对应的HTML内容）。

如何使用：

　　E:<ts-hello></ts-hello>     （定义指令的时候，必须是驼峰式，调用时：前部分+‘-’+后部分（不用首字母大写））

　　A:<div ts-hello></div>

　　C: <div class='ts-hello'></div>
　　M: <!-- directive:ts-hello     （replace:true）

带参的自定义指令：

　　只需要在第二个参数返回时候，加上scope，指定对象 对象的名字testName,值‘@’

练习：自定义指令以及传参，显示hello angularJs

 <!DOCTYPE html>
 <html ng-app="myApp">
 <head lang="en">
   <meta charset="UTF-8">
   <title></title>
   <script src="js/angular.js"></script>
 </head>
 <body ng-controller="myCtrl">
 <!--通过以元素的方式 调用自定义指令-->
 <my-directive ts-name="Hello AngularJs"></my-directive>
 <!--扩展属性-->
 <div my-directive ts-name="Hello AngularJs"></div>
 <!--class-->
 <div class="my-directive" ts-name="Hello AngularJs"></div>

 <script>
 //模块的声明
   var app = angular.module('myApp',['ng']);
 //自定义指令
 //  E-->Element A-->Attribute  C-->Class M-->Comment
   app.directive('myDirective', function () {
     return{
       restrict:'EACM',
       replace:true,
 //    通过双花括号 显示tsName值
       template:'<p>{{tsName}}</p>',
 //    通过@读取
       scope:{
         tsName:'@'
       }
     }
   });
     //控制器的声明
   app.controller('myCtrl', function ($scope) {

   });
 </script>
 </body>
 </html>

AngularJs学习笔记3——自定义指令的更多相关文章

  1. AngularJS学习笔记(四) 自定义指令

    指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...

  2. AngularJs学习笔记5——自定义服务

    前面整理了AngularJs双向数据绑定和自定义指令的相关内容,从手册上看也知道,ng部分还包括过滤器和函数,以及服务等. 过滤器:filter,就是对数据进行格式化,注意管道格式,例如: {{表达式 ...

  3. 【AngularJS学习笔记】01 指令、服务和过滤器

    AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 比如: ng-app 指令初始化一个 AngularJS 应用程序.注意ng-app一般为空,如果值不为空,就得加这样一句代码va ...

  4. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  5. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  6. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  7. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  8. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  9. AngularJs学习笔记--Managing Service Dependencies

    原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他ser ...

随机推荐

  1. uvalive 4851 Restaurant（扫描法）

    题意:有一个M*M的网格,坐标[0...M-1,0...M-1] 网格里面有两个y坐标同样的宾馆A和B.以及n个餐厅,宾馆AB里面各有一个餐厅,编号1,2,其它餐厅编号3-n.如今你打算新开一家餐厅. ...

  2. window+Apache 配置虚拟主机(2)

    1. 打开虚拟主机功能 2. 设置虚拟主机相应的文件夹 3. 将虚拟的域名绑定到127.0.0.1 4. 结果图: 记忆一下,突然感觉都忘记了!

  3. [Protractor] Getting Started With Protractor

    Protractor is an end-to-end testing library for AngularJS. Install: npm install -g protractor This w ...

  4. Java设计模式---工厂模式（简单工厂、工厂方法、抽象工厂）

    工厂模式:主要用来实例化有共同接口的类,工厂模式可以动态决定应该实例化那一个类.工厂模式的形态工厂模式主要用一下几种形态:1:简单工厂(Simple Factory).2:工厂方法(Factory M ...

  5. 关于Web安全的链接文章

    1.CSRF(跨站请求伪造) http://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html 2.深入理解JavaScript Hijacki ...

  6. Sass插值、注释、数剧类型、字符串、值类型

    插值#{}使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系.比如说你想写更干净的.高效的和面向对象的 CSS.Sass 中的插值(Interpolation)就是重要 ...

  7. C#socket通讯两个最经典错误解决方案

    1.经典错误之 无法访问已释放的对象. 对象名:“System.Net.Sockets.Socket”     (1).问题现场   (2).问题叙述 程序中的某个地方调用到了socket.close ...

  8. 学习okhttp wiki--HTTPS

    HTTPS OkHttp尝试平衡两个相互竞争的要素: 连通性(Connectivity):连接到尽可能多的服务器.这包括运行最新版本 boringssl 的服务器和不太过时的老版本 OpenSSL 的 ...

  9. x++ and ++x

    http://blog.sina.com.cn/s/blog_6c762bb30101ar1w.html 看到个东西,搞不清的时候可以看看 =.=

  10. url编码方法（暂时知道是什么

    var a="https://i.cnblogs.com/EditPosts.aspx?opt=1" encodeURI(a); encodeURIComponent(); dec ...