angularJS表达式和指令
主要是描述angularJS如何扩展html的：(模型后面会涉及)
例子1：通过指令来扩展html
<body ng-app="myapp"> <!-- ng-app指令 定义angular的最大控制范围-->
<div ng-init="name='luna';age=30"> <!-- ng-init指令 可以采用表达式的形式来初始化模型-->
姓名是：<span>{{name}}</span>
年龄是：<span>{{age}}</span> <!-- 表达式可以绑定到html中-->
加法计算： <span>{{ 100 + 10000}}</span>
</div>
<div>
输入价格：<input type="text" ng-model="price"/> <!-- 通过ng-model指令将输入框的值绑定在模型上 -->
</div>
</body>
这个示例子主要是描述了angular表达式和指令是如何使用在html中的。
这些指令是angular跟视图能连接起来的唯一方式，做html设计的设计者可以专注于设计这些html模板。
当然也可以自己定义一个指令：
例子：
var app = angular.module("myApp", []);
app.directive("myDirective", function() {
return {
template : "<h3>自定义指令!</h3>"
};
});
返回的对象中包含
{
restrict : "EA", // 表示 指令可以放在哪些地方
templateUrl : "", // html模板地址
templete : "", // string html模板字符串表示
}
<myDirective></myDirective> 这样就相当于将定义的指令替换在html中。
ng-repeat指令可以遍历数据：
<div ng-app="" ng-init="names=['zhaoyang','john','chenlong']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names"> {{ x }}
</li>
</ul>
</div>
angularJS表达式和指令的更多相关文章
- AngularJS 简介、指令、表达式
AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...
- angularjs学习总结一(表达式、指令、模型)
一:自执行匿名函数 (function(){ /*code*/})();自执行匿名函数:常见格式:(function() { /* code */ })();解释:包围函数(function(){}) ...
- AngularJS的表达式、指令的学习（2）
最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...
- AngularJS表达式
1. AngularJS使用表达式把数据绑定到HTML. 2. AngularJS表达式的特点: 表达式写在双大括号内:{{表达式}}. 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之 ...
- AngularJS中的指令全面解析（转载）
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- 使用Angularjs的ng-cloak指令避免页面乱码
在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- angularjs表达式中的HTML内容，如何不转义，直接表现为html元素
在模板中直接: 在ionic中直接使用: <p class="contentwen" ng-bind-html="detial.content">& ...
- 你知道用AngularJs怎么定义指令吗？
前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...
随机推荐
- Python---4字符串与编码
字符编码 字符串比较特殊的是还有一个编码问题. 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节(byte),所以,一个 ...
- mac下配置开发环境
常用命令 显示隐藏文件 1 defaults write com.apple.finder AppleShowAllFiles -boolean true ; killall Finder 关闭隐藏文 ...
- 高效能Windows人士的N个习惯之一：启动篇
接触电脑十多年,经历了各种折腾阶段,这几年开始沉静下来,不再追求花哨的界面与应用,只注重工作的效率,逐渐养成了一套自己的操作习惯,感觉不错,特撰文分享.标题借用了一下<高效能人士的七个习惯> ...
- Ubuntu14.04下GAMIT10.6的安装
#安装步骤将ubuntu切换到root用户权限 1 $sudo -s ##安装必要软件 1 2 3 4 5 $ apt-get install gcc $ apt-get install gfortr ...
- redis集群配置及python操作
之前我们分析过喜马拉雅的爬取信息,使用分布式爬取,而且需要修改scrapy-redis的过滤算法为布隆过滤来减少redis内存占用,最后考虑这样还是不一定够,那么redis集群就是更好的一种选择方式了 ...
- c#或者C#.net中的“ToolTip”是“System.Windows.Forms.ToolTip”和“DevComponents.DotNetBar.ToolTip”之间的不明确的引用
“ToolTip”是“System.Windows.Forms.ToolTip”和“DevComponents.DotNetBar.ToolTip”之间的不明确的引用 ,在编程时,有时候会编译出现不明 ...
- Tornado 简述
前言 python 旗下,群英荟萃,豪杰并起.单是用于 web 开发的,就有 webpy.web2py.bottle.pyramid.zope2.flask.tornado.django 等等,不一而 ...
- VMware安装CentOS6.X 系统
1.虚拟机中的"CD/DVD(IDE)"配置好Linux映像文件后,打开虚拟机,点击"开启此虚拟机" 2.进入光盘启动界面,选择第一项,表示安装升级Linux系 ...
- CentOS 7下Apache + PHP + MySQL环境（LAMP）的安装
Step 1:更换阿里云 yum 源 curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7 ...
- java反序列化-ysoserial-调试分析总结篇(6)
前言: 这篇记录CommonsCollections6的调试,外层也是新的类,换成了hashset,即从hashset触发其readObject(),yso给的调用链如下图所示 利用链分析: 首先在h ...