Angularjs4.0 模板语法之属性绑定

在理解Angular属性绑定前需要先知道：
在 Angular 的世界中，attribute 唯一的作用是用来初始化元素和指令的状态。 当进行数据绑定时，只是在与元素和指令的 property 和事件
打交道，而 attribute 就完全靠边站了。HTML attribute 和 DOM property就算名字相同也不是同一样东西。

一、绑定的类型可以根据数据流的方向分成三类：从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

数据方向	语法	绑定类型
单向从数据源，到视图目标	{{expression}} [target]="expression" bind-target="expression"	插值表达式，Property，Attribute，类，样式
单向从视图目标，到数据源	(target)="statement" on-target="statement"	事件
双向	[(target)]="expression" bindon-target="expression"	双向

二、属性绑定

1.attribute，当元素没有属性可绑的时候，就必须使用 attribute 绑定，由attr前缀，一个点 (.) 和 attribute 的名字组成。

<img [src]="heroImageUrl">   //property绑定
<td [attr.colspan]="1 + 1">One-Two</td>  //attribute绑定 
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button> //attribute绑定

2.CSS 类绑定，是由class前缀，一个点 (.)和 CSS 类的名字组成，其中后两部分是可选的。形如：[class.class-name]。

<div class="bad curly special" [class]="badCurly">Bad curly</div>  //后者覆盖前者
<div [class.special]="isSpecial">The class binding is special</div>

//NgClass绑定，添加或移除多个CSS类
<div [ngClass]="currentClasses">special</div>
//currentClasses值在组件方法里面设置
currentClasses: {};
setCurrentClasses() {
  // CSS classes: added/removed per current state of component properties
  this.currentClasses =  {
    saveable: this.canSave,
    modified: !this.isUnchanged,
    special:  this.isSpecial
  };
}

3.样式style绑定，由style前缀，一个点 (.)和 CSS 样式的属性名组成。形如：[style.style-property]。

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

//同时设置多个内联样式，用NgStyle指令
<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>

currentStyles: {};
setCurrentStyles() {
  // CSS styles: set per current state of component properties
  this.currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };
}