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学习笔记之一的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  6. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  10. AngularJs学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

随机推荐

  1. Hibernate单表操作

    单一主键 assigned:由Java应用程序负责生成(即手工的赋值) native:由底层的数据库自动的生成标示符,如果是MySQL就是auto_increment,如果是Oracle就是seque ...

  2. SpringMVC系列之(二) springMVC和Struts异同

    Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块.使用 Spring ...

  3. Cassandra使用pycassa批量导入数据

    本周接手了一个Cassandra系统的维护工作,有一项是需要将应用方的数据导入我们维护的Cassandra集群,并且为应用方提供HTTP的方式访问服务.这是我第一次接触KV系统,原来只是走马观花似的看 ...

  4. UNIX环境高级编程——信号

    一.信号生命周期 从信号发送到信号处理函数的执行完毕. 对于一个完整的信号生命周期(从信号发送到相应的处理函数执行完毕)来说,可以分为三个重要的阶段,这三个阶段由四个重要事件来刻画:信号诞生:信号在进 ...

  5. Linux之解决你的网络问题

    在网络方面,Linux系统通常可以正常的工作,但是偶尔也会出现让人心烦一些的问题,下面就是一些网络问题的常用的解决方案. 如果你的网络接口看起来已经启动和运行,但是不能访问因特网,这时你就可以试试pi ...

  6. mysql的基本使用命令

    启动:net start mySql; 进入:mysql -u root -p/mysql -h localhost -u root -p databaseName; 列出数据库:show datab ...

  7. ViewPager 实现 Galler 效果, 中间大图显示,两边小图展示

    正常情况下, ViewPager 一页只能显示一项数据, 但是我们常常看到网上,特别是电视机顶盒的首页经常出现中间大图显示两端也都露出一点来,这种效果怎么实现呢?先上一张效果图: 大家第一眼肯定想到了 ...

  8. ios入门OC_UI晋级学什么?

    1. OC 语法初步, 你可能学到面向对象最近本的概念, 并且可以大致的建立几个自以为是的类,但这仅仅是开始. 你知道为什么面向对象要有3大特性么.知道他们是用到什么设计模式的么 2. 你可能学到了N ...

  9. 无法与域Active Directory域控制器(AD DC)连接(虚机加域出错问题)

    今天建了两台虚机用的VMWARE,一台做域控,一台做应用服务器,但是部署好域控要把应用服务器加入域时候报错 虚机网卡设置桥接并设置好IP使两台虚机在同一个局域网内,通过ip地址互ping能ping通, ...

  10. 11_Android中HttpClient的应用,读取网络xml及xml解析流,Handler的应用,LayoutInflater的使用,SmartImageView的使用

     1 所需的web项目结构如下: 2 new.xml的文件内容如下: <?xml version="1.0" encoding="UTF-8" ?&g ...