angularjs学习笔记之一

Posted 生命不息,奋斗不止!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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学习笔记01 序

Angularjs 学习笔记

AngularJS学习笔记01 指令服务和过滤器

JS学习笔记——AngularJS 1.x双向数据绑定机制

JS学习笔记——AngularJS 1.x双向数据绑定机制

Angularjs学习笔记----与后端服务器通信