Ionic动态加载页面

最新推荐文章于 2021-06-05 01:01:57 发布

Linda L

最新推荐文章于 2021-06-05 01:01:57 发布

阅读量5.1k

点赞数

本文链接：https://blog.csdn.net/lindonglian/article/details/52556750

版权

Ionic 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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">Todo</h1>
            <!-- 新增按钮-->
            <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">Left</h1>
        </ion-header-bar>
    </ion-side-menu>

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

    <div 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写的页面能自适应屏幕
这里写图片描述