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就会调用相应的方法