4.基本指令model 和bind和click

#1. ng-model

把應用程序數據綁定到HTML元素，實現model和view的雙向綁定。

定義數據來源

在AngularJS中，只須要使用ng-model指令就能夠把應用程序數據綁定到HTML元素，實現model和view的雙向綁定。

示例，使用ng-model指令對數據進行綁定。

<div ng-app="">
請輸入任意值：<input type="text" ng-model="name" />
你輸入的爲： {{ name }}
</div>

ng-model把相關處理事件綁定到指定標籤上，這樣咱們就能夠不用在手工處理相關事件(好比change等)的條件下完成對數據的展示需求。

以上介紹了ng-model的單向綁定(view->model)後面控制器咱們會用到它的雙向綁定功能

#2. ng-bind

指令ng-bind和AngularJS表達式{{}}有殊途同歸之妙，但不一樣之處就在於ng-bind是在angular解析渲染完畢後纔將數據顯示出來的。

使用ng-bind指令綁定把應用程序數據。

<div ng-app="">請輸入一個名字：<input type="text" ng-model="name" />
Hello <span ng-bind="name"></span></div>

1. 瀏覽器須要首先加載頁面，渲染它

2. AngularJS解析

PS：使用{{}}花括號語法時，由於瀏覽器須要首先加載頁面，渲染它，而後AngularJS才能把它解析成你指望看到的內容，因此對於首個頁面中的數據綁定操做，建議採用ng-bind，以免其未被渲染的模板被用戶看到。

3. 事件指令

AngularJS也有本身的HTML事件指令,好比說經過ng-click定義一個AngularJS單擊事件。

#4. ng-click

AngularJS也有本身的HTML事件指令,好比說經過ng-click定義一個AngularJS單擊事件。

對按鈕、連接等，咱們均可以用ng-click指令屬性來實現綁定，以下簡單示例：

<div ng-app="" ng-init="click=false">

 <button ng-click="click= !click">隱藏/顯示</button>//後面的值是一個東東

 <div ng-hide="click">

   請輸入一個名字：<input type="text" ng-model="name" /

        Hello <span ng-bind="name">
        </span> 
    </div>
    </div>

PS：ng-hide="true"，設置HTML元素不可見。

ng-click指令將DOM元素的鼠標點擊事件(即mousedown)綁定到一個方法上，當瀏覽器在該DOM元素上鼠標觸發點擊事件時，Angular就會調用相應的方法