2015/09/07

AngularJS ng-bind

今天在幫朋友修改網頁時使用Angular,剛好看到 ng-bind這功能
平常都是用{{}}來印出值

<td>
      {{s.Name}}&nbsp
      {{s.En}}&nbsp
      {{s.Ch}}&nbsp
      {{s.Math}}&nbsp
      {{(s.En + s.Ch + s.Math) / 3 | number:2}}
     </td>

而改用ng-bind則必須搭配一個HTML標籤來做使用
<td>
 <span ng-bind="s.Name"></span>
 <span ng-bind="s.En"></span>
 <span ng-bind="s.Ch"></span>
 <span ng-bind="s.Math"></span>
 <span ng-bind="(s.En + s.Ch + s.Math) / 3 | number:2"></span>
</td>

使用ng-bind好處則是必須指派一個HTML來做bind動作
相對的能避免使用看到沒有編譯過的原始碼


參考資料:
http://blog.miniasp.com/post/2013/06/04/AngularJS-Expression-and-ngBind-directive-tips.aspx