Ionic动态加载页面


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js">script>
    <script src="js/app.js">script>
    <script type="text/javascript" src="cordova.js">script>
head>
<body ng-app="todo" ng-controller="TodoCtrl">
<ion-side-menus>

    
    <ion-side-menu-content>
        <ion-header-bar class="bar-dark">
            <h1 class="title">Todoh1>
            
            <button class="button button-icon" ng-click="newTask()">
                <i class="icon ion-compose">i>
            button>
        ion-header-bar>
        <ion-content>
            
            <ion-list>
                <ion-item ng-repeat="task in tasks">
                    {{task.title}}
                ion-item>
            ion-list>
        ion-content>
    ion-side-menu-content>

    
    <ion-side-menu side="left">
        <ion-header-bar class="bar-dark">
            <h1 class="title">Lefth1>
        ion-header-bar>
    ion-side-menu>

ion-side-menus>
<script id="new-task" type="text/ng-template">

    
class="modal"> <ion-header-bar class="bar-secondary"> <h1 class="title">新建事务h1> <button class="button button-clear button-positive" ng-click="closeNewTask()">关闭button> ion-header-bar> <ion-content> <form ng-submit="createTask(task)"> <div class="list"> <label class="item item-input"> <input type="text" placeholder="请填写代办事项" ng-model="task.title"> label> div> <div class="padding"> <button type="submit" class="button button-block button-positive">新建事务button> div> form> ion-content> div> script> body> html>

app.js

angular.module('todo', ['ionic'])

        .controller('TodoCtrl', function ($scope, $ionicModal) {
        $scope.tasks = [
            {title: 'aaa'},
            {title: 'bbb'},
            {title: 'ccc'},
            {title: 'ddd'}
        ];
        // 创建并载入模型
        $ionicModal.fromTemplateUrl('new-task', function (modal) {
            $scope.taskModal = modal;
        }, {
            scope: $scope,
            animation: 'slide-in-up'
        });

        // 表单提交时调用
        $scope.createTask = function (task) {
            $scope.tasks.push({
                title: task.title
            });
            $scope.taskModal.hide();
            task.title = "";
        };

        // 打开新增的模型
        $scope.newTask = function () {
            $scope.taskModal.show();
        };

        // 关闭新增的模型
        $scope.closeNewTask = function () {
            $scope.taskModal.hide();
        };

    });

$ionicModal.fromTemplateUrl用于加载html片段,第一个参数对应script的id。第二参数是一个方法,该方法的参数对应div片段的class。这里将整个html片段赋值给页面的一个叫taskModal的变量,点击新建/关闭按钮的时候通过show()或hide()来控制弹出框的显示和隐藏。点击新建事务后将输入框输入的值通过push追加到tasks数组中,这样就可以在列表中回显刚添加的数据。

ionic写的页面能自适应屏幕
Ionic动态加载页面_第1张图片

Ionic动态加载页面_第2张图片

你可能感兴趣的:(Ionic)