angularJS(一):表达式、指令
简介
以 JavaScript 编写的库,是一个 JavaScript 框架
一、表达式
AngularJS 使用 表达式 把数据绑定到 HTML。
- 表达式写在双大括号内:{{ expression }}。
- 表达式把数据绑定到 HTML,与 ng-bind 指令有异曲同工之妙。
- 将在表达式书写的位置"输出"数据。
- 它们可以包含文字、运算符和变量。实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }
二、指令
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
ng-app | 初始化一个 AngularJS 应用程序(告诉 AngularJS,ng-app所在元素是 AngularJS 应用程序 的"所有者"。)
<div ng-app="" ng-init="firstName='John'"> <p>在输入框中尝试输入:</p> |
ng-init | 定义初始值 |
ng-model |
把元素值(比如输入域的值)绑定到应用程序。用于表单元素的,支持双向绑定(在修改输入域的值时, AngularJS 属性的值也将修改:)。对普通元素无效({数据绑定:{ firstName }} 是通过 ng-model="firstName" 进行同步。) 模型 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值 <div ng-app="myApp" ng-controller="myCtrl"> <form ng-app="" name="myForm"> 验证用户输入 <form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'"> 应用状态
|
ng-repeat | 对于集合中(数组中)的每个项会 克隆一次 HTML 元素
<div data-ng-app="" data-ng-init="names=['Jani1','Hege','Kai']"> |
创建自定义指令:
- 使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
- 元素<runoob-directive></runoob-directive>
- 只能通过属性的方式来调用,restrict : "E",
<body ng-app="myApp"> <runoob-directive></runoob-directive> <script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
- 属性<div runoob-directive></div>
- 只能通过属性的方式来调用,restrict : "A",
<body ng-app="myApp"> <div runoob-directive></div> <script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
- 类名<div class="runoob-directive"></div>
- 只能通过属性的方式来调用,restrict : "C",
<body ng-app="myApp"> <div class="runoob-directive"></div> <script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "C",
template : "<h1>自定义指令!</h1>"
};
});
</script>
- 注释<!-- directive: runoob-directive -->
- 只能通过属性的方式来调用,restrict : "M",
<body ng-app="myApp"> <!-- directive: runoob-directive --> <script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "M",
replace : true,
template : "<h1>自定义指令!</h1>"
};
});
</script>
restrict 默认值为 EA
, 即可以通过元素名和属性名来调用指令。
angularJS(一):表达式、指令的更多相关文章
- AngularJS 简介、指令、表达式
AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...
- AngularJS的表达式、指令的学习(2)
最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...
- AngularJS中的指令全面解析(转载)
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- 使用Angularjs的ng-cloak指令避免页面乱码
在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 你知道用AngularJs怎么定义指令吗?
前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...
- Ⅵ.AngularJS的点点滴滴-- 指令
指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...
- AngularJS创建新指令 - 基本功能
指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令. AngularJS原有的指令 ng-init ...
- AngularJS:表达式
ylbtech-AngularJS:表达式 1.返回顶部 1. AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS ...
- [转]你知道用AngularJs怎么定义指令吗?--很详细
前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...
随机推荐
- ICPC — International Collegiate Programming Contest Asia Regional Contest, Yokohama, 2018–12–09 题解
目录 注意!!此题解存在大量假算法,请各位巨佬明辨! Problem A Digits Are Not Just Characters 题面 题意 思路 代码 Problem B Arithmetic ...
- sh_04_判断考试成绩
sh_04_判断考试成绩 # 练习2: 定义两个整数变量 python_score.c_score,编写代码判断成绩 python_score = 50 c_score = 50 # 要求只要有一门成 ...
- Android中StatFs获取系统/sdcard存储(剩余空间)大小
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- (54)LINUX应用编程和网络编程之九Linux网络通信实践
3.9.1.linux网络编程框架 3.9.1.1.网络是分层的 (1)OSI 7层模型(理论指导) (2)网络为什么要分层 (3)网络分层的具体表现 3.9.1.2.TCP/IP协议引入(网络分层实 ...
- springboot上传文件大小限制的配置
springboot配置文件: application.properties #配置文件传输 spring.servlet.multipart.enabled =true spring.servlet ...
- Vue中 v-bind和v-on 缩写
v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> & ...
- 三十九、python面向对象一
A.python面向对象 1.面向对象基础:面向对象三个特性:封装,继承,多态C# java 只能用面向对象编程Ruby,python 函数+面向对象 函数式编程:def 函数def f1(a): r ...
- Navicat Premium Mac 12 破解方法-亲测成功
参照这2篇文档,破解成功了.操作步骤写的很清楚,不再缀述,只记录一下自己破解过程中,认为要注意的点.以免以后再多花时间熟悉重新熟悉操作步骤 Mac安装Navicat(破解版) Navicat Prem ...
- lambda一些查询语句
<!--得分数据结构-->1 <Score> <studentid>1</studentid> <courseid>1</course ...
- 彻底理解RSA算法原理
1. 什么是RSA RSA算法是现今使用最广泛的公钥密码算法,也是号称地球上最安全的加密算法.在了解RSA算法之前,先熟悉下几个术语 根据密钥的使用方法,可以将密码分为对称密码和公钥密码 对称密码:加 ...