首页 > 代码库 > AngularJs学习笔记3——自定义指令

AngularJs学习笔记3——自定义指令

2024-08-24 16:10:13   218人阅读

指令　　

概述：

　　前面也说过一些常用指令，用于快速入门。现在详细总结一下：指令用于实现各种页面的操作，是对于底层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——自定义指令


联系
我们