Onsen UI +Angular

    在Onsen UI 2.0中，我们将Angular绑定作为单独的库提供。需要加载核心Onsen UI库（onsenui.js），AngularJS（angular.js）以及Onsen UI（angular-onsenui.js）的Angular绑定。

加载指令

要加载指令，需要指定onsen为应用程序的依赖项：

var app = angular.module('myApp', ['onsen']);

还有一个方法ons.boostrap()来关联AngularJS和Onsen UI：

var app = ons.bootstrap();

数据绑定

将数据绑定到组件是AngularJS中的一个重要概念。例如使用ng-model指令将input元素的值绑定到变量。

<input type="text"  ng-model="person.name"> </input>
Hello, {
   { person.name }}!

Onsen UI扩展了HTML语言，但所有Onsen UI输入元素仍然支持ng-model数据绑定：

<ons-input ng-model="person.name"> </ons-input>
Hello, {
   { person.name }}!

表单元素

ng-model指令适用于表单<ons-range>，输入框<ons-input>和开关<ons-switch>。

还有一个叫做的指令ng-change可以用来听取变化。

<ons-range  ng-model="person.age"  ng-change="person.ageChanged()"> </ons-range>

事件处理

一些Onsen UI组件可以自定义DOM事件。可以使用ons-{eventName}指令在AngularJS中捕获这些事件。

要捕获postpush事件，<ons-navigator>您可以使用ons-postpush指令。

<ons-navigator ons-postpush="handlePostpush()"> </ons-navigator>

<ons-page>元素

Onsen UI中页面的根目录是使用该<ons-page>元素创建的。它覆盖整个屏幕，并用作其他元素的容器。管理多个视图时，所有视图都必须包含在<ons-page>元素中。

<ons-page>
  Content goes here
</ons-page>

此元素自动生成一个 background和content元素。这些也可以手动提供，以实现更高的可定制性：

<ons-page>
  Toolbar here

  <div class="background"></div>

  <div class="content">
    Scrollable content here
  </div>

  Fixed content here
</ons-pa