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
<!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——自定义指令的更多相关文章
- AngularJS学习笔记(四) 自定义指令
指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
- AngularJs学习笔记5——自定义服务
前面整理了AngularJs双向数据绑定和自定义指令的相关内容,从手册上看也知道,ng部分还包括过滤器和函数,以及服务等. 过滤器:filter,就是对数据进行格式化,注意管道格式,例如: {{表达式 ...
- 【AngularJS学习笔记】01 指令、服务和过滤器
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 比如: ng-app 指令初始化一个 AngularJS 应用程序.注意ng-app一般为空,如果值不为空,就得加这样一句代码va ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- AngularJs学习笔记--Managing Service Dependencies
原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他ser ...
随机推荐
- Socket tips: UDP Echo service - Server code
#include <stdio.h> #include <stdlib.h> #include <sys/types.h> #include <sys/soc ...
- ansible 学习与实践
title: ansible 学习与实践 date: 2016-05-06 16:17:28 tags: --- ansible 学习与实践 一 介绍 ansible是新出现的运维工具是基于Pytho ...
- HTML5 为什么这么火？
H5是超文本语言HTML的第五次修订,是近几年来Web标准巨大的飞跃. 以往,我们在Web上还只是上网看一些基础文档,但现在,Web是一个内涵非常丰富的平台.和以前版本不同的是,HTML5并非仅仅用来 ...
- 忘记了SqlServer的SA密码怎么办
转自 http://v-consult.be/2011/05/26/recover-sa-password-microsoft-sql-server-2008-r2/ 如果忘记了sa密码,并且wind ...
- 高仿QQ即时聊天软件开发系列之二登录窗口界面
继上一篇高仿QQ即时聊天软件开发系列之一开端之后,开始做登录窗口 废话不多说,先看效果,只有界面 可能还有一些细节地方没有做,例如那个LOGO嘛,不要在意这些细节 GIF虽短,可是这做起来真难,好吧因 ...
- MVC路由规则以及前后台获取Action、Controller、ID名方法
1.前后台获取Action.Controller.ID名方法 前台页面:ViewContext.RouteData.Values["Action"].ToString(); Vie ...
- 概率dp小结
好久之前学过,记得是一次亚洲区的前几天看了看概率dp,然后亚洲区就出了一道概率dp,当时虽然做上了,但是感觉有很多地方没懂,今天起早温习了一下,觉得很多地方茅塞顿开,果然学习的话早上效果最好了. 首先 ...
- 【转】c/c++各种字符、字符串类型转换
itoa 功 能:把一整数转换为字符串 用 法:char *itoa(int value, char *string, int radix); 详细解释:itoa是英文integer to ...
- uva 10922 - 2 the 9s
題目意思:讀取一數字,此數字最大有1000位.計算該數字是否為九的倍數?如是,再計算其階層數. ※判斷是否為九的倍數:所有位數相加 ÷ 9＝0,即為九的倍數. ※計算階層數:所有位數相加後得出的第一個 ...
- px em rem
px 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小,这时会使用我们 ...