Ionic動態載入頁面
阿新 • • 發佈：2019-02-14
<!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> 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寫的頁面能自適應螢幕
