angular指令（二）--内置指令
一、基础ng 属性指令：
ng-href
ng-src
ng-disabled
ng-checked
ng-readonly
ng-selected
ng-class
ng-style
布尔属性的有：
ng-disabled、ng-readonly、ng-checked、ng-selected
类布尔属性有：
ng-href、ng-src
二、在指令中使用子作用域
ng-app
ng-controller
ng-include
使用ng-include可以加载、编译并包含外部HTML片段到当前的应用中。模板的URL被限制
在与应用文档相同的域和协议下，可以通过白名单或包装成被信任的值来突破限制。更进一步，
需要考虑跨域资源共享（Cross-Origin Resource Sharing，CORS）和同源规则（Same Origin Policy）
来确保模板可以在任何浏览器中正常加载。例如，所有浏览器都不能进行跨域的请求，部分浏览
器也不能访问file://协议的资源。
在开发中，可以通过命令行命令chrome --allow-file-access-from-files来
禁止CORS错误。只在紧急情况下使用这个方法，比如你的老板正站在你身后，
并且所有事情都无法正常工作。
在同一个元素上添加onload属性可以在模板加载完成后执行一个表达式。
要记住，使用ng-include时AngularJS会自动创建一个子作用域。如果你想使用某个特定的作
用域，例如ControllerA的作用域，必须在同一个DOM元素上添加ng-controller ="ControllerA"
指令，这样当模板加载完成后，不会像往常一样从外部作用域继承并创建一个新的子作用域。下
面看一个例子：
<div ng-include="/myTemplateName.html"
ng-controller="MyController"
ng-init="name = 'World'">
Hello {{ name }}
</div>
ng-switch
这个指令和ng-switch-when及on="propertyName"一起使用，可以在propertyName发生变
化时渲染不同指令到视图中。在下面的例子中，当person.name是Ari时，文本域下面的div会显
示出来，并且这个人会获得胜利：
<input type="text" ng-model="person.name"/>
<div ng-switch on="person.name">
<p ng-switch-default>And the winner is</p>
<h1 ng-switch-when="Ari">{{ person.name }}</h1>
</div>
注意，在switch被调用之前我们用ng-switch-default来输出默认值。
ng-view
ng-view指令用来设置将被路由管理和放置在HTML中的视图的位置。
ng-if
使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if
的表达式的值是false，那对应的元素将会从DOM中移除，否则对应元素的一个克隆将被重新插
入DOM中。
ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而
是真正生成或移除节点。
当一个元素被ng-if从DOM中移除，同它关联的作用域也会被销毁。而且当它重新加入DOM
中时，会通过原型继承从它的父作用域生成一个新的作用域。
同时有一个重要的细节需要知道，ngIf重新创建元素时用的是它们编译后的状态。如果ng-if
内部的代码加载之后被jQuery修改过（例如用.addClass），那么当ng-if的表达式值为false时，
这个DOM元素会被移除，表达式再次成为true时这个元素及其内部的子元素会被重新插入
DOM，此时这些元素的状态会是它们的原始状态，而不是它们上次被移除时的状态。也就是说
无论用jQuery的.addClass添加了什么类都不会存在了。
<div ng-if="2+2===5">
Won't see this DOM node, not even in the source code
</div>
<div ng-if="2+2===4">
Hi, I do exist
</div>
ng-repeat
ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素
都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。
$index：遍历的进度（0...length-1）。
$first：当元素是遍历的第一个时值为true。
$middle：当元素处于第一个和最后元素之间时值为true。
$last：当元素是遍历的最后一个时值为true。
$even：当$index值是偶数时值为true。
$odd：当$index值是奇数时值为true。
下面的例子展示了如何用$odd和$even来制作一个红蓝相间的列表。记住，JavaScript中数组
的索引从0开始，因此我们用!$even和!$odd来将$even和$odd的布尔值反转。
<ul ng-controller="PeopleController">
<li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">
{{person.name}} lives in {{person.city}}
</li>
</ul>
.odd {
background-color: blue;
}
.even {
background-color: red;
}
angular.module('myApp',[])
.controller('PeopleController',function($scope) {
$scope.people = [
{name: "Ari", city: "San Francisco"},
{name: "Erik", city: "Seattle"}
];
});
ng-init
ng-init指令用来在指令被调用时设置内部作用域的初始状态。
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指令的元素内。
ng-cloak
除使用ng-bind来避免未渲染元素闪烁，还可以在含有{{ }}的元素上使用ng-cloak指令：
<body ng-init="greeting='HelloWorld'">
<p ng-cloak>{{ greeting }}</p>
</body>
ng-cloak指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。
ng-bind-template
<div
ng-bind-template="{{message}}{{name}}">
</div>
ng-model
ng-model指令用来将input、select、text area或自定义表单控件同包含它们的作用域中
的属性进行绑定。它可以提供并处理表单验证功能，在元素上设置相关的CSS类（ng-valid、
ng-invalid等），并负责在父表单中注册控件。
它将当前作用域中运算表达式的值同给定的元素进行绑定。如果属性并不存在，它会隐式创
建并将其添加到当前作用域中。
我们应该始终用ngModel来绑定$scope上一个数据模型内的属性，而不是$scope上的属性，
这可以避免在作用域或后代作用域中发生属性覆盖。
例如：
<input type="text"
ng-model="modelName.someProperty" />
ng-show/ng-hide
ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的
值为false时元素会被隐藏。类似地，当赋值给ng-hide指令的值为true时元素也会被隐藏。
元素的显示或隐藏是通过移除或添加ng-hide这个CSS类来实现的。.ng-hide类被预先定义
在了AngularJS的CSS文件中，并且它的display属性的值为none（用了!important标记）。
<div ng-show="2 + 2 == 5">
2 + 2 isn't 5, don't show
</div>
<div ng-show="2 + 2 == 4">
2 + 2 is 4, do show
</div>
<div ng-hide="2 + 2 == 5">
2 + 2 isn't 5, don't hide
</div>
<div ng-hide="2 + 2 == 4">
2 + 2 is 4, do hide
</div>
ng-change
这个指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入，这个指令要
和ngModel联合起来使用。
<div ng-controller="EquationController">
<input type="text" ng-model="equation.x"
ng-change="change()" />
<code>{{ equation.output }}</code>
</div>
angular.module('myApp',[])
.controller('EquationController',function($scope) {
$scope.equation = {};
$scope.change = function() {
$scope.equation.output
= parseInt($scope.equation.x) + 2;
};
});
上面的例子中，只要文本输入字段中的内容发生了变化就会改变equation.x的值，进而运
行change()函数。
ng-form
ng-form用来在一个表单内部嵌套另一个表单。普通的HTML <form>标签不允许嵌套，但
ng-form可以。
这意味着内部所有的子表单都合法时，外部的表单才会合法。这对于用ng-repeat动态创建
表单是非常有用的。
由于不能通过字符插值来给输入元素动态地生成name属性，所以需要将ng-form指令内每组
重复的输入字段都包含在一个外部表单元素内。
下面的CSS类会根据表单的验证状态自动设置：
表单合法时设置ng-valid；
表单不合法时设置ng-invlid；
表单未进行修改时设置ng-pristion；
表单进行过修改时设置ng-dirty。
Angular不会将表单提交到服务器，除非它指定了action属性。要指定提交表单时调用哪个
JavaScript方法，使用下面两个指令中的一个。
ng-submit：在表单元素上使用。
ng-click：在第一个按钮或submit类型（input[type=submit]）的输入字段上使用。
为了避免处理程序被多次调用，只使用下面两个指令中的一个。
下面的例子展示了如何通过服务器返回的JSON数据动态生成一个表单。我们用ng-loop来遍
历从服务器取回的所有数据。由于不能动态生成name属性，而我们又需要这个属性做验证，所以
在循环的过程中会为每一个字段都生成一个新表单。
由于AngularJS中用来取代<form>的ng-form指令可以嵌套，并且外部表单在所有子表单都合
法之前一直处于不合法状态，因此我们可以在动态生成子表单的同时使用表单验证功能。是的，
鱼和熊掌可以兼得。
下面先看一下我们硬编码的JSON数据，把它假设成是从服务器返回的：
angular.module('myApp',[])
.controller('FormController',function($scope) {
$scope.fields = [
{placeholder: 'Username', isRequired: true},
{placeholder: 'Password', isRequired: true},
{placeholder: 'Email (optional)', isRequired: false}
];
$scope.submitForm = function() {
alert("it works!");
};
});
下面用这些数据生成一个有验证功能的动态表单：
<form name="signup_form"
ng-controller="FormController"
ng-submit="submitForm()" novalidate>
<div ng-repeat="field in fields"
ng-form="signup_form_input">
<input type="text"
name="dynamic_input"
ng-required="field.isRequired"
ng-model="field.name"
placeholder="{{field.placeholder}}" />
<div
ng-show="signup_form_input.dynamic_input.$dirty &&
signup_form_input.dynamic_input.$invalid">
<span class="error"
ng-show="signup_form_input.dynamic_input.$error.required">
The field is required.
</span>
</div>
</div>
<button type="submit"
ng-disabled="signup_form.$invalid">
Submit All
</button>
</form>
input.ng-invalid {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}
ng-click
ng-click用来指定一个元素被点击时调用的方法或表达式。
<div ng-controller="CounterController">
<button ng-click="count = count + 1"
ng-init="count=0">
Increment
</button>
count: {{ count }}
<button ng-click="decrement()"> Decrement
</button>
<div>
angular.module('myApp',[])
.controller('CounterController', function($scope) {
$scope.decrement = function() {
$scope.count = $scope.count - 1;
};
})
ng-select
ng-select用来将数据同HTML的<select>元素进行绑定。这个指令可以和ng-model以及
ng-options指令一同使用，构建精细且表现优良的动态表单。
ng-options的值可以是一个内涵表达式（comprehension expression），其实这只是一种有趣
的说法，简单来说就是它可以接受一个数组或对象，并对它们进行循环，将内部的内容提供给
select标签内部的选项。它可以是下面两种形式。
数组作为数据源：
用数组中的值做标签；
用数组中的值作为选中的标签；
用数组中的值做标签组；
用数组中的值作为选中的标签组。
对象作为数据源：
用对象的键值（key-value）做标签；
用对象的键值作为选中的标签；
用对象的键值作为标签组；
用对象的键值作为选中的标签组。
下面看一个ng-select指令的实例：
<div ng-controller="CityController">
<select ng-model="city"
ng-options="city.name for city in cities">
<option value="">Choose City</option>
</select>
Best City: {{ city.name }}
</div>
angular.module('myApp',[])
.controller('CityController',function($scope) {
$scope.cities = [
{name: 'Seattle'},
{name: 'San Francisco'},
{name: 'Chicago'},
{name: 'New York'},
{name: 'Boston'}
];
});
ng-submit
ng-submit用来将表达式同onsubmit事件进行绑定。这个指令同时会阻止默认行为（发送请
求并重新加载页面），除非表单不含有action属性。
<form ng-submit="submit()"
ng-controller="FormController">
Enter text and hit enter:
<input type="text"
ng-model="person.name"
name="person.name" />
<input type="submit"
name="person.name"
value="Submit" />
<code>people={{people}}</code>
<ul ng-repeat="(index, object) in people">
<li>{{ object.name }}</li>
</ul>
</form>
angular.module('myApp',[])
.controller('FormController',function($scope) {
$scope.person = {
name: null
};
$scope.people = [];
$scope.submit = function() {
if ($scope.person.name) {
$scope.people.push({name: $scope.person.name});
$scope.person.name = '';
}
};
});
ng-class
使用ng-class 动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式。重复
的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加。
下面的例子会用ng-class在一个随机数大于5时将.red类添加到一个div上：
<div ng-controller="LotteryController">
<div ng-class="{red: x > 5}"
ng-if="x > 5">
You won!
</div>
<button ng-click="x = generateNumber()"
ng-init="x = 0">
Draw Number
</button>
<p>Number is: {{ x }}</p>
</div> .red {
background-color: red;
}
angular.module('myApp',[])
.controller('LotteryController', function($scope) {
$scope.generateNumber = function() {
return Math.floor((Math.random()*10)+1);
};
});
ng-attr-(suffix)
当AngularJS编译DOM时会查找花括号{{ some expression }}内的表达式。这些表达式会
被自动注册到$watch服务中并更新到$digest循环中，成为它的一部分：
<-- updated when`someExpression` on the$scope
is updated -->
<h1>Hello{{someExpression}}</h1>
有时浏览器会对属性会进行很苛刻的限制。SVG就是一个例子：
<svg>
<circle cx="{{ cx }}"></circle>
</svg>
运行上面的代码会抛出一个错误，指出我们有一个非法属性。可以用ng-attr-cx来解决这
个问题。注意，cx位于这个名称的尾部。在这个属性中，通过用{{ }}来写表达式，达到前面提
到的目的。
<svg>
<circle ng-attr-cx="{{ cx }}"><circle>
</svg>
angular指令（二）--内置指令的更多相关文章
- Angular中的内置指令和自定义指令
NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...
- [转] Angular 4.0 内置指令全攻略
[From] https://segmentfault.com/a/1190000010416792 简书链接 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简 ...
- Angular内置指令（一）
要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突 目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng- ...
- Angular内置指令
记录一下工作中使用到的一些AngularJS内置指令 内置指令:所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突 1. ng-model 使用ng-model实现双向绑定,通过表单的 ...
- Angular——内置指令
内置指令 ng-app 指定应用根元素,至少有一个元素指定了此属性. ng-controller 指定控制器 ng-show控制元素是否显示,true显示.false不显示 ng-hide控制元素是否 ...
- angular内置指令相关知识
原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...
- 浅谈Angularjs至Angular2后内置指令的变化
一.科普概要说明 我们常说的 Angular 1 是指 AngularJS: 从Angular 2 开始已经改名了.不再带有JS,只是单纯的 Angular: Angular 1.x 是基于JavaS ...
- AngularJS内置指令
指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单 ...
- angularJS内置指令一览
基础ng指令 ng-href ng-src ng-disabled ng-readonly ng-checked ng-selected ng-class ng-style ng-show ng-hi ...
- AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令
1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...
随机推荐
- HTML布局四剑客-Flex,Grid,Table,Float
前言 在HTML布局中有很多的选择,同一种表现方式可以使用不同的方法来实现.下面来对四种最常见的布局方式进行阐述和解释,它们分别是Float,Table,Grid和Flex Float 第一位出场的就 ...
- django模板复用 extends，block，include
template复用 extends block include render 参考:https://code.ziqiangxuetang.com/django/django-template.ht ...
- struct 模块 把一个类型，如数字，转成固定长度的bytes
该模块可以把一个类型,如数字,转成固定长度的bytes import struct headers=struct.pack('i',132333) print(headers,len(headers) ...
- vuejs项目打包成APP后，首页不显示
- 在Web上运行Linux—js/linux模拟器
一个叫Fabrice Bellard 的程序员写了一段Javascript在Web浏览器中启动Linux(原网页,我把这个网页iframe在了下面),目前,你只能使用Firefox 4和Chrome ...
- Angular学习笔记—架构简述
这个架构图展现了 Angular 应用中的 8 个主要构造块: 模块 (module) 组件 (component) 模板 (template) 元数据 (metadata) 数据绑定 (data b ...
- JVM虚拟机—JVM内存
JVM在运行时将数据划分为了5个区域来存储,这5个区域图示如下: 其中方法区和堆对是所有线程共享的内存区域:而java栈.本地方法栈和程序员计数器是运行时线程私有的内存区域. 首先我们熟悉一下一个 J ...
- python中math常用函数
python中math的使用 import math #先导入math包 1 三角函数 print math.pi #打印pi的值 3.14159265359 print math.radians(1 ...
- Spark --idea无法new scala class
问题: 无法新建Scala class 解决: 1.下载插件 setting-->Plugins-->安装scala插件-->提示重启idea-->自动提示你安装scala s ...
- Python单元测试框架——unittest
测试的常用规则 一个测试单元必须关注一个很小的功能函数,证明它是正确的: 每个测试单元必须是完全独立的,必须能单独运行.这样意味着每一个测试方法必须重新加载数据,执行完毕后做一些清理工作.通常通过se ...