AngularJs学习笔记3——自定义指令
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJs学习笔记3——自定义指令相关的知识，希望对你有一定的参考价值。
指令
概述：
前面也说过一些常用指令，用于快速入门。现在详细总结一下：指令用于实现各种页面的操作，是对于底层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
1 <!DOCTYPE html> 2 <html ng-app="myApp"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="js/angular.js"></script> 7 </head> 8 <body ng-controller="myCtrl"> 9 <!--通过以元素的方式 调用自定义指令--> 10 <my-directive ts-name="Hello AngularJs"></my-directive> 11 <!--扩展属性--> 12 <div my-directive ts-name="Hello AngularJs"></div> 13 <!--class--> 14 <div class="my-directive" ts-name="Hello AngularJs"></div> 15 16 <script> 17 //模块的声明 18 var app = angular.module(‘myApp‘,[‘ng‘]); 19 //自定义指令 20 // E-->Element A-->Attribute C-->Class M-->Comment 21 app.directive(‘myDirective‘, function () { 22 return{ 23 restrict:‘EACM‘, 24 replace:true, 25 // 通过双花括号 显示tsName值 26 template:‘<p>{{tsName}}</p>‘, 27 // 通过@读取 28 scope:{ 29 tsName:‘@‘ 30 } 31 } 32 }); 33 //控制器的声明 34 app.controller(‘myCtrl‘, function ($scope) { 35 36 }); 37 </script> 38 </body> 39 </html>
以上是关于AngularJs学习笔记3——自定义指令的主要内容，如果未能解决你的问题，请参考以下文章