angularjs学习第六天笔记（指令简介学习）
您好，由于周末有事情，没哟学习angularjs，几天晚上开始继续学习angularjs,坚持加油每一天。谢谢
接着上周五学习了表单验证以后，今天开始学习angularjs中一个非常重要的模块：指令
今天主要先简单了解学习一下指令的一些基本概念后使用
一、指令的简介
指令其实就是angularjs对html的一个扩展，实现自定义html元素
angularjs其自身封装了一些常用的系统指令，我们也可以根据需要自定义指令
二、自定义指令简介
自定义指令的基本格式
app.directive("指令名称",function(){
restrict: '指令匹配格式',
replace: true,是否自定义元素替代指令申明
template: '<a href="http://www.baidu.com">百度一下马上达</a>'
});
自定义指令关键词说明：
指令名称说明:名字一般采用驼峰命名，及首字母小写其余单词大写
在调用时，要将大写字母转换为小写并加上-
举例：myDirectiveTest 调用为：my-directive-test
备注：由于其内部指令是以ng开头，所以为了避免冲突，自定义指令名称不要以ng开头
restrict有四种枚举值：
E：指令按照元素来匹配
使用：<my-directive-test></my-directive-test>
C：按照class来匹配
使用：<div class='my-directive-test'></div>
A：按照属性来匹配
使用：<div my-directive-test></div>
M：按照注释来匹配
<!--directive:my-directive-test-->
虽然提供了四种匹配方式，但是考虑到浏览器的兼容性问题，尽可能按照属性来匹配：A
一个简单的练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="myApp">
<my-directive-e></my-directive-e><br />
<div my-directive-a></div><br />
<p class="my-directive-c"></p><br />
</body>
</html>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.directive("myDirectiveE", function () {
return {
restrict: "E",
replace: true,
template: "<a href='http://www.baidu.com'>百度一下马上达</a>"
}
});
app.directive("myDirectiveA", function () {
return {
restrict: "A",
replace: true,
template: "<a href='http://www.baidu.com'>百度一下马上达</a>"
}
});
app.directive("myDirectiveC", function () {
return {
restrict: "C",
replace: true,
template: "<a href='http://www.baidu.com'>百度一下马上达</a>"
}
});
</script>
三、指令中的数据传递
指令中数据传递采用的方式也是数据绑定方式{{}}
其实数据传递原理是：实现指令中的绑定是和html中属性想匹配
其实现步骤：
1、首先需要给指令创建一个隔离作用域
2、定义与html中属性值匹配方式，有如下匹配方式：
指令中的属性名称:"@html中的属性名称"
指令中的属性名称:"@" 如果只有@那么html中的属性名称必定有指令中的属性名称完全一致
指令中的属性名称:"=html中的属性名称" ，实现html和指令中的数据双向绑定
@匹配方式简单练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="myApp">
<div my-directive-a my-valuess="点击我吧" url="http//:www.baidu.com"></div><br />
</body>
</html>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.directive("myDirectiveA", function () {
return {
restrict: "A",
replace: true,
scope:{
myValuess: "@",
myLink:"@url"
},
template: "<a href='{{myLink}}'>{{myValuess}}</a>"
}
});
</script>
通过=实现双向数据绑定练习：
<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<script src="Scripts/angular.js"></script>
</head>
<body>
<label>硬编码的input</label>
<input type="text" ng-model="Url">
<div my-directive some-attrs="Url"></div> <script src="../angular.min.js"></script>
<script>
angular.module('app', [])
.directive('myDirective', function() {
return {
restrict: 'A',
replace: true,
scope: {
myUrl: '=someAttrs', // 等号用做 双向绑定 这里不做详细介绍
},
template: '<div>'+
'<label>指令中的input</label>'+
'<input type="text" ng-model="myUrl">'+
'<a href="{{ myUrl }}">点我试试</a>'+
'</div>' }
})
</script>
</body>
</html>
今天就到此为止，明天继续研究表单验证，明天学习：angularjs内置指令
angularjs学习第六天笔记（指令简介学习）的更多相关文章
- AngularJS的表达式、指令的学习（2）
最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...
- iOS阶段学习第六天笔记（数组）
iOS学习( ...
- iOS 阶段学习第六天笔记（数组）
iOS学习( ...
- 强化学习读书笔记 - 02 - 多臂老O虎O机问题
# 强化学习读书笔记 - 02 - 多臂老O虎O机问题 学习笔记: [Reinforcement Learning: An Introduction, Richard S. Sutton and An ...
- 强化学习读书笔记 - 05 - 蒙特卡洛方法(Monte Carlo Methods)
强化学习读书笔记 - 05 - 蒙特卡洛方法(Monte Carlo Methods) 学习笔记: Reinforcement Learning: An Introduction, Richard S ...
- 强化学习读书笔记 - 06~07 - 时序差分学习(Temporal-Difference Learning)
强化学习读书笔记 - 06~07 - 时序差分学习(Temporal-Difference Learning) 学习笔记: Reinforcement Learning: An Introductio ...
- Python学习基础笔记（全）
换博客了,还是csdn好一些. Python学习基础笔记 1.Python学习-linux下Python3的安装 2.Python学习-数据类型.运算符.条件语句 3.Python学习-循环语句 4. ...
- 强化学习读书笔记 - 13 - 策略梯度方法(Policy Gradient Methods)
强化学习读书笔记 - 13 - 策略梯度方法(Policy Gradient Methods) 学习笔记: Reinforcement Learning: An Introduction, Richa ...
- 强化学习读书笔记 - 12 - 资格痕迹(Eligibility Traces)
强化学习读书笔记 - 12 - 资格痕迹(Eligibility Traces) 学习笔记: Reinforcement Learning: An Introduction, Richard S. S ...
随机推荐
- ·通过wifi_scan学习esp32wifi程序编写
在ESP32的设计开发中,我们必然会需要使用到wifi或ble功能,今天就讲解下如何将WIFI功能纳入到ESP32中来. 初始化WiFi环境 首先,WiFi子系统的初始化需要由我们自己来自行,当我们写 ...
- BASH 基本语法
本节内容 1. 什么是shell script 2. 变量 3. 运算符 4. 流程控制 5. 函数 6. 计划任务 crontab 一 什么是shell script 将OS命令堆积到 ...
- [翻译] FastReport TfrxReport组件使用
一:加载和保存报表 报表默认保存在项目窗体文件中,大多数情况下,没有更多的操作要深圳市, 因此,你不需要采取特别措施来载入报告.如果你决定保存报表到文件或是数据库中 (这样更灵活, 比如修改报表不用重 ...
- 找出数组中求和等于y的所有子数组
算法记录: 给定一个数组x,每个元素都是正整数,找出其中满足条件"求和等于y"的所有子数组.(简化问题,每个元素都不相等) x=[x1,...,xn],暴力搜索,复杂度O(2^n) ...
- MySQL基础--字符函数
1.UPPER和UCASE返回字符串str,根据当前字符集映射(缺省是ISO-8859-1 Latin1)把所有的字符改变成大写.该函数对多字节是可靠的. 2.LOWER和LCASE返回字符串str, ...
- 背水一战 Windows 10 (85) - 文件系统: 获取文件夹和文件, 分组文件夹, 排序过滤文件夹和文件, 搜索文件
[源码下载] 背水一战 Windows 10 (85) - 文件系统: 获取文件夹和文件, 分组文件夹, 排序过滤文件夹和文件, 搜索文件 作者:webabcd 介绍背水一战 Windows 10 之 ...
- 三菱蓝瑟CK4A
日本JDM蓝瑟,而且还是MR的性能版,避震行程也是这么长的.证明这个车子就是这样设计的. 90年代拉力血统的车就这样? 东南厂国产的蓝瑟,原装避震是厦门开发生产,来自于台湾开发工业集团的全资子公司,而 ...
- Javascript高级编程学习笔记（6）—— 流程控制语句
话不多说,我们直接开始进入今天的主题 流程控制语句 首先什么是流程控制语句呢? 顾名思义,就是控制流程的语句. 在JS中语句定义了ECMAScript中的主要语法,让我们可以使用一系列的关键字来完成指 ...
- 第二十节：详细讲解String和StringBuffer和StringBuilder的使用
前言 在 Java中的字符串属于对象,那么Java 中提供了 String 类来创建和操作字符串,即是使用对象:因为String类修饰的字符一旦被创建就不可改变,所以当对字符串进行修改的时候,需要使用 ...
- 卖给高通之后的CSR的现状和未来
转眼之间,CSR已经嫁给高通两年了,养在深宫大院大小妾的CSR,到底过的怎么样呢? 从高通官网上查看的结果显示,CSR产品被分成了三类: A 传统的用在耳机音响的CSR86XX系列,这部分改动不大,就 ...