Ionic Angular不适用于Android设备
问题描述:
我在2天内遇到了Ionic Framework问题。我不知道为什么我的控制器没有被我的设备找到。我有其他离子项目完美工作。有人能帮我吗 ?Ionic Angular不适用于Android设备
我打电话给我的控制器ng-controller在标签上,而我的ng-app在body上。然后,我在我的app.js上配置了外部模块,然后使用按钮功能接下来我的controller.js。这段代码完全适用于浏览器,但在Android设备上,他不执行任何这些angularjs指令。
我app.js
var app = angular.module('starter', ['ionic', 'ionic-datepicker', 'ion-floating-menu', 'ionic-timepicker']);
app.run(function ($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(function (ionicTimePickerProvider) {
var timePickerObj = {
inputTime: (((new Date()).getHours() * 60 * 60) + ((new Date()).getMinutes() * 60)),
format: 24,
step: 10,
setLabel: 'Set',
closeLabel: 'Close'
};
ionicTimePickerProvider.configTimePicker(timePickerObj);
})
app.config(function (ionicDatePickerProvider) {
var datePickerObj = {
inputDate: new Date(),
titleLabel: 'Selecione a data',
setLabel: 'OK',
todayLabel: 'Hoje',
closeLabel: 'Fechar',
mondayFirst: false,
weeksList: ["Dom", "Seg", "Ter", "Quar", "Quin", "Sex", "Sab"],
monthsList: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
templateType: 'popup',
from: new Date(2012, 8, 1),
to: new Date(2018, 8, 1),
showTodayButton: true,
dateFormat: 'dd MMMM yyyy',
closeOnSelect: false,
disableWeekdays: []
};
ionicDatePickerProvider.configDatePicker(datePickerObj);
})
app.controller('mainController', function ($scope, $ionicPopup, $timeout, $ionicListDelegate,
ionicDatePicker, ionicTimePicker, $interval) {
//Task Recebe a Model taskModel
var tasks = new getTask();
$scope.dias = 0;
$scope.horas = 0;
$scope.minutos = 0;
$scope.segundos = 0;
$scope.fullTime = {};
$scope.taskDate = '';
$scope.taskTime = {
horas: "",
minutos: ""
};
var data = $scope.taskTime;
$scope.lista = tasks.items;
$scope.showMarket = false;
$scope.removeStatus = false;
$scope.plusHide = false;
$scope.marcarTarefa = function (item) {
item.finalizada = !item.finalizada;
};
$scope.click = function() {
console.log($scope.showMarket);
};
$scope.onHideItem = function (item) {
return item.finalizada && $scope.showMarket;
};
$scope.onItemRemove = function (item) {
tasks.remove(item);
tasks.save();
};
$scope.onControlShow = function() {
$scope.removeStatus = !$scope.removeStatus;
$scope.plusHide = !$scope.plusHide;
};
function conveterTempo(item) {
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
var now = new Date().getTime();
console.log(now);
var timeRest = new Date(item.date).getTime();
console.log(timeRest);
var distance = timeRest - now;
console.log(distance);
var days = Math.floor(distance/_day);
$scope.dias = days;
var hours = Math.floor((distance % _day)/_hour);
$scope.horas = hours;
var minutes = Math.floor((distance % _hour)/_minute);
$scope.minutos = minutes;
var seconds = Math.floor((distance % _minute)/_second);
$scope.segundos = seconds;
};
//Função de click do relógio
$scope.onItemClick = function (item) {
conveterTempo(item);
$ionicPopup.show({
title: "Tempo restante",
scope: $scope,
template: "Data a ser entregue: " + item.date + "<p>Hora de entrega: " +
item.time.horas + " : " + item.time.minutos + "</p>" + "<br>"
+ "Faltam: " +$scope.dias + " - dias <br>" +$scope.horas+" horas "+ $scope.minutos + " minutos " + $scope.segundos,
buttons: [{
text: "Ok",
}, {
text: "Cancelar"
},]
});
$ionicListDelegate.closeOptionButtons();
}
//Fim da função do clique ----->
//Função acionada ao click no campo de input da data
$scope.openDatePicker = function() {
//Recebe a data do datepicker e passa para o escopo
var getData = {
callback: function (val) {
$scope.taskDate = new Date(val).toDateString();
},
};
ionicDatePicker.openDatePicker(getData);
};
$scope.openTimePicker = function() {
//Recebe a data do datepicker e passa para o escopo
var getTime = {
callback: function (val) {
if (typeof (val) === 'undefined') {
console.log('Time not selected');
} else {
var selectedTime = new Date(val * 1000);
$scope.taskTime = {
horas: selectedTime.getUTCHours(),
minutos: selectedTime.getUTCMinutes()
};
$scope.taskTime.full = $scope.taskTime.horas + " : " + $scope.taskTime.minutos;
};
},
};
ionicTimePicker.openTimePicker(getTime);
};
$scope.fullTime = function (data) {
if (data.horas === '') {
console.log("Ainda não possui tempo definido.")
} else {
console.log("Horas: " + data.horas);
console.log("Minutos: " + data.minutos);
return data.horas + ":" + data.minutos;
}
};
$scope.onItemAdd = function() {
var item = {
nome: '',
finalizada: true,
date: '',
time:
{
horas: '',
minutos: ''
}
};
getItem(item, true);
};
function getItem(item, novo) {
$scope.data = {};
$scope.time = {};
$scope.data.newTask = item.nome;
$ionicPopup.show({
title: "Nova tarefa",
scope: $scope,
template: "<input type='text' placeholder='Nova tarefa...' autofocus ='true' ng-model='data.newTask'>" +
"<input type='text' placeholder='Selecione a data de conclusão' ng-model='taskDate' ng-click='openDatePicker()' />" +
"<input type='text' placeholder='Selecione a hora de conclusão' ng-model='taskTime.full' ng-init='taskTime.full = fullTime(taskTime)' ng-click='openTimePicker()'>",
buttons: [{
text: "Ok",
onTap: function (e) {
item.nome = $scope.data.newTask;
item.date = $scope.taskDate;
item.time.horas = $scope.taskTime.horas;
item.time.minutos = $scope.taskTime.minutos;
if (novo) {
tasks.add(item);
};
tasks.save();
}
}, {
text: "Cancelar"
},]
});
$ionicListDelegate.closeOptionButtons();
};
$scope.onItemEdit = function (item) {
getItem(item, false);
};
});
<!DOCTYPE html>
<html>
<head>
\t <meta charset="utf-8">
\t <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
\t <title>TaskFC</title>
\t <link rel="manifest" href="manifest.json">
\t <link href="lib/ionic/css/ionic.css" rel="stylesheet">
\t <link href="css/style.css" rel="stylesheet">
\t <script src="lib/ionic/js/ionic.bundle.js"></script>
\t <link href="css/ion-floating-menu.min.css" rel="stylesheet">
\t <script src="lib/angular-timer/angular-timer.min.js"></script>
\t <script src="lib/floating-menu/ion-floating-menu.min.js"></script>
\t <script src="js/taskModel.js"></script>
\t <script src="cordova.js"></script>
\t <script src="js/app.js"></script>
\t <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
\t <script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>
\t <script src="lib/ionic-timepicker/dist/ionic-timepicker.bundle.min.js"></script>
</head>
<body ng-app="starter">
\t <ion-pane ng-controller="mainController">
\t \t <ion-header-bar class="bar-positive">
\t \t \t <!--<button class="button button-icon icon ion-navicon"></button>-->
\t \t \t <h1 class="title">Lista de tarefas</h1>
\t \t \t <button class="button button-icon icon ion-settings" ng-click="onControlShow()"></button>
\t \t </ion-header-bar>
\t \t </div>
\t \t <ion-content>
\t \t \t <ion-list show-delete="removeStatus">
\t \t \t \t <ion-item ng-repeat="item in lista track by $index" ng-hide="onHideItem(item)">
\t \t \t \t \t <!--especificando a propriedade do item buscada-->
\t \t \t \t \t <div class="row">
\t \t \t \t \t \t <div class="col col-50">
\t \t \t \t \t \t \t <div class="item-icon-right" ng-click="onItemClick(item)">
\t \t \t \t \t \t \t \t {{item.nome}}
\t \t \t \t \t \t \t \t <i class="icon ion ion-android-time"></i>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <ion-delete-button class="ion-minus-circled" ng-click="onItemRemove(item)"></ion-delete-button>
\t \t \t \t \t \t \t <ion-option-button class="button-positive" ng-click="onItemEdit(item)">Editar</ion-option-button>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="col">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="col">
\t \t \t \t \t \t \t <button class="button button-positive button-small button-outline" ng-click="marcarTarefa(item)">
<i class="ion ion-checkmark" ng-show="!item.finalizada"></i>
</button>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </ion-item>
\t \t \t </ion-list>
\t \t \t <div style="text-align:center; font-size:10px;">Icons made by <a href="http://www.flaticon.com/authors/madebyoliver" title="Madebyoliver">Madebyoliver</a> from <a href="http://www.flaticon.com"
\t \t \t \t \t title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0"
\t \t \t \t \t target="_blank">CC 3.0 BY</a></div>
\t \t </ion-content>
\t \t <ion-footer-bar class="bar-positive">
\t \t \t <div class="row row-center">
\t \t \t \t <div class="col col-90">
\t \t \t \t \t <div class="buttons">
\t \t \t \t \t \t <button class="button button-clear button-light">Finalizadas</button>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="10">
\t \t \t \t \t <label class="toggle toggle-light toggle-small">
<input type="checkbox" ng-model="showMarket" />
<div class="track">
<div class="handle"></div>
</div>
</label>
\t \t \t \t </div>
\t \t \t </div>
\t \t </ion-footer-bar>
\t \t <div class="row responsive-sm">
\t \t \t <ion-floating-button ng-click="onItemAdd()" ng-show="plusHide" has-footer="true" button-color="#EF473A" icon="ion-plus" icon-color="#fff">
\t \t \t </ion-floating-button>
\t \t </div>
\t </ion-pane>
</body>
</html>
我taskModel.js
//Rarray de itens
功能getTask(){ this.items = [];
var lista = localStorage.getItem("tasklist");
if(lista !== null)
{
this.items = angular.fromJson(lista);
};
this.save = function() {
var lista = angular.toJson(this.items);
localStorage.setItem("tasklist", lista);
};
this.remove = function (item) {
var pos = this.items.indexOf(item);
this.items.splice(pos, 1);
};
this.add = function (item) {
this.items.push(item);
};
}
答
把你的代码,以离子游乐场,在这里发生的错误:
//Task Recebe a Model taskModel
var tasks = new getTask();
getTask
没有在你的代码中定义。所以你的控制器在启动时直接抛出一个错误。
Here's the Playground example,以防你想玩弄它。 ;)
哇,谢谢OClyde,我不知道这个游乐场,非常有用的OMG!我试图使工作清除我的控制器和我的HTML,使用ng-click()使用简单的调用函数,但仍然无法正常工作。 :( –
你检查控制台?抛出的任何错误?否则只保存操场上并张贴在这里,所以我可以看看:)以后有 – OClyde
是在控制台上没有错误在这里。 :(http://play.ionic.io/app/4de8b75fa15f –