angularjs学习笔记之一
directive
通过AngularJS模块API中的.directive()方法,我们可以通过传入一个字符串和一个函数来
注册一个新指令。其中字符串是这个指令的名字,指令名应该是驼峰命名风格的,函数应该返回
一个对象。
ng-controller
内置指令ng-controller的作用是为嵌套在其中的指令创建一个子作用域,避免将所有操作
和模型都定义在$rootScope上。用这个指令可以在一个DOM元素上放置控制器。
首先,我们使用了$rootScope的子作用域,它提
供了一个干净的对象供我们操作。使用子作用域意味着其上的数据模型和操作在应用的其他地方
是无法访问的,只能被这个作用域内的指令及其子作用域访问。其次,显式声明了数据模型,我
们说过,这非常重要。为了展示这为什么重要,看一下这个例子的变体
首先快速了解一下由DOM通过内置指令ng-controller提供的作用域。这个指令的作用是在
DOM中创建一个新的子作用域
ng-pattern
使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式
ng-model
ng-model指令用来将input、select、text area或自定义表单控件同包含它们的作用域中
的属性进行绑定。它可以提供并处理表单验证功能,在元素上设置相关的CSS类(ng-valid、
ng-invalid等),并负责在父表单中注册控件。
它将当前作用域中运算表达式的值同给定的元素进行绑定。如果属性并不存在,它会隐式创
建并将其添加到当前作用域中。
我们应该始终用ngModel来绑定$scope上一个数据模型内的属性,而不是$scope上的属性,
这可以避免在作用域或后代作用域中发生属性覆盖。
ng-change
这个指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入,这个指令要
和ngModel联合起来使用。
ng-bind
尽管可以在视图中使用{{ }}模板语法(AngularJS内置的方式),我们也可以通过ng-bind
指令实现同样的行为。
<body ng-init="greeting='HelloWorld'">
<p ng-bind="greeting"></p>
</body>
HTML加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁(Flash of
Unrendered Content,FOUC)。我可以用ng-bind将内容同元素绑定在一起避免FOUC。内容会被
当作子文本节点渲染到含有ng-bind指令的元素内
angularjs学习笔记之一的更多相关文章
- AngularJs学习笔记--Forms
		
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
 - AngularJs学习笔记--expression
		
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
 - AngularJs学习笔记--directive
		
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
 - AngularJs学习笔记--Guide教程系列文章索引
		
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
 - AngularJs学习笔记--bootstrap
		
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
 - 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 ...
 - AngularJs学习笔记--Using $location
		
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
 - AngularJs学习笔记--unit-testing
		
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
 
随机推荐
- C++对象模型的那些事儿之二:对象模型(下)
			
前言 上一篇博客C++对象模型的那些事儿之一为大家讲解了C++对象模型的一些基本知识,可是C++的继承,多态这些特性如何体现在对象模型上呢?单继承.多重继承和虚继承后内存布局上又有哪些变化呢?多态真正 ...
 - (NO.00005)iOS实现炸弹人游戏(二):素材选择的取舍
			
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 前面一篇里我们基本明确了游戏的大致玩法和特点.下面就游戏中会用到 ...
 - 动手实现linux中的cp命令(可自行拓展)
			
我们在学习系统编程的时候,一定会有这样的经历,让你动手实现一个简单的cp命令,也就是拷贝相应的文件到对应的目录,或者说是复制吧,当然,实现非常的简单,我们来看看源码吧: #include <st ...
 - 【一天一道LeetCode】#263. Ugly Number
			
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Write a ...
 - iOS开发之二:UIWindow与UIView
			
1.UIWindow UIWindow 继承自UIView,它是整个应用的容器,一般来说一个应用就只有一个UIWindow. 如果不使用storyboard 时,需要我们自己创建UIWindow.实例 ...
 - LPSTR、LPWSTR、LPCSTR、LPCWSTR、LPTSTR、LPCTSTR的区分与转化
			
首先在编译程序时经常会遇到这种问题: 错误 1 error C2664: "CWnd::MessageBoxW": 不能将参数 1 从"const char [3]&qu ...
 - [C++学习历程]Visual Studio 2010 中文旗舰版 安装
			
作者: 苏生米沿 本文地址:http://blog.csdn.net/sushengmiyan/article/details/19765441 要开始学习C++了,先装个开发环境吧,没有选择最新的2 ...
 - 海量数据挖掘MMDS week7: 相似项的发现:面向高相似度的方法
			
http://blog.csdn.net/pipisorry/article/details/49742907 海量数据挖掘Mining Massive Datasets(MMDs) -Jure Le ...
 - Linux Debugging(四): 使用GDB来理解C++ 对象的内存布局(多重继承,虚继承)
			
前一段时间再次拜读<Inside the C++ Object Model> 深入探索C++对象模型,有了进一步的理解,因此我也写了四篇博文算是读书笔记: Program Transfor ...
 - 通过一个tomcat端口访问多个tomcat项目 tomcat转发
			
需求是这样的,有一个tomcat,是80端口,现在我要通过这个tomcat转发到服务器其他tomcat,其他tomcat的端口不是80.这样做就可以避免这样www.baidu.com:8081的情况. ...