<ion-slide-box>
<ion-slide ng-repeat="imageUrl in item.images">
<img ng-src="{{imageUrl}}" />
</ion-slide>
</ion-slide-box>
and my Controller:
$scope.changeItem = function(differentItem) {
$scope.item = differentItem;
//$scope.$apply();
$ionicSlideBoxDelegate.update();
};
Whenever the changeItem() button is clicked, it changes $scope.item which i use in ng-repeat(in slide-box).
My problem here is that $ionicSlideBoxDelegate.update(); doesn't update and set the pager index to 0 with the new number of images of the selected item even though the $scope.item changes.
edit: Indeed, this seems like a known issue, as noted on the official Ionic forum. However, I made the example work as you can see here. Things I've changed are the following:
I updated the ionic to version 1.0.1 (you can see the links from http://code.ionicframework.com/)
used the $ionicSlideBoxDelegate.slide(0); because it otherwise fails again if you click the button when on the last image
used the $ionicSlideBoxDelegate.update() as you were trying, but inside the $timeout since (as you will read on forum) it could be that the items are not yet rendered when you call the update() method on $ionicSlideBoxDelegate;
Updated code, here for reference:
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope, $http, $ionicSlideBoxDelegate, $timeout) {
$scope.item = {};
$scope.item.images = [
'http://lorempixel.com/400/200/',
'http://lorempixel.com/400/300/',
'http://lorempixel.com/400/400/',
];
$scope.changeImages = function(){
$ionicSlideBoxDelegate.slide(0);
$scope.item.images = [
'http://lorempixel.com/200/200/',
'http://lorempixel.com/300/300/'
];
$timeout(function(){
$ionicSlideBoxDelegate.update();
}, 500);
};
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/1.0.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.1/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-slide-box show-pager="true">
<ion-slide ng-repeat="imageUrl in item.images track by $index">
<img ng-src="{{imageUrl}}" />
<button class="button" ng-click="changeImages()">change imgs</button>
</ion-slide>
</ion-slide-box>
</body>
</html>
--edit end--
I made a test project on CodePen, and as you can see, changing the images on the item object updates accordingly.
So, without seeing the rest of your code, we can't help. You can make a similar CodePen example with your code, so that we can see immediately what may be wrong with it.
Code pasted here for reference:
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope, $http) {
$scope.item = {};
$scope.item.images = [
'http://lorempixel.com/400/200/',
'http://lorempixel.com/400/300/',
'http://lorempixel.com/400/400/',
];
$scope.changeImages = function(){
$scope.item.images = [
'http://lorempixel.com/200/200/',
'http://lorempixel.com/300/300/',
'http://lorempixel.com/500/400/',
];
};
});
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/0.9.25/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.25/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar title="myTitle"></ion-header-bar>
<ion-pane class="has-header" padding="true">
<h2>You can't see me</h2>
</ion-pane>
</body>
</html>
Related
Here is the problem. Sorry for stupid question.
I read how to connect this library to my project.
I use vs-code. First, i need to install npm in my project with command npm install sweetalert2 in vs-code terminal. I did that.
Next i need to add reference to sweetalert2.min.js and sweetalert2.min.css in <head>.
And call the function.
Swal.fire({
title: 'Error!',
text: 'Do you want to continue',
icon: 'error',
confirmButtonText: 'Cool'
})
I also make button with onclick function but this not work. I click button and nothing. No modal window.
Here is my code. Help to see my problem. Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps&display=swap" rel="stylesheet">
<script src="/node_modules/sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="/node_modules/sweetalert2/dist/sweetalert2.min.css">
<script>
function CBR_XML_Daily_Ru(rates) {
function trend(current, previous) {
if (current > previous) return ' ▲';
if (current < previous) return ' ▼';
return '';
}
var USDrate = rates.Valute.USD.Value.toFixed(4).replace('.', ',');
var USD = document.getElementById('USD');
USD.innerHTML = USD.innerHTML.replace('00,0000', USDrate);
USD.innerHTML += trend(rates.Valute.USD.Value, rates.Valute.USD.Previous);
var EURrate = rates.Valute.EUR.Value.toFixed(4).replace('.', ',');
var EUR = document.getElementById('EUR');
EUR.innerHTML = EUR.innerHTML.replace('00,0000', EURrate);
EUR.innerHTML += trend(rates.Valute.EUR.Value, rates.Valute.EUR.Previous);
}
</script>
<link rel="dns-prefetch" href="https://www.cbr-xml-daily.ru/">
<script src="https://www.cbr-xml-daily.ru/daily_jsonp.js" async></script>
</head>
<body>
<button onclick="functi()">Тест Sweetalert</button>
<div class="container-message">
<div class="mainInfo">
<h1>Что день грядующий нам готовит ? Богатство или бедность? <span class="usd-color">$</span></h1>
<div id="USD">Доллар США $ — 00,0000 руб.</div>
<div id="EUR">Евро € — 00,0000 руб.</div>
</div>
</div>
<script>
function functi() {
Swal.fire({
title: 'Error!',
text: 'Do you want to continue',
icon: 'error',
confirmButtonText: 'Cool'
})
}
</script>
</body>
</html>
And also attach chrome-console log console
So, i find solution.
I use cdn url from documentation <script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>.
But this not work.
I change this url in head to <script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></script>
And it works!
I just getting started with Ionic and have done environment setup for the same, but when I tried to emulate the app, below is happening:
Able to start the simulator
App also starts but it shows "html code" instead of app
Below are my files, I appreciate any help finding any mistakes.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.min.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src=“js/app.js”></script>
</head>
<body ng-app="todo">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<button class="button button-assertive">I'm a button</button>
</ion-content>
</ion-pane>
</body>
</html>
app.js
angular.module(‘todo’, ['ionic’]);
Change quotation marks from <script src=“js/app.js”></script> to <script src="js/app.js"></script>
app.js should look like this
angular.module('todo', ['ionic'])
.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();
}
});
})
And your app should look like this
I am trying to create a simple that will read the data from a qr code, the apps is working perfectly, it can open the camera and capture the image, the problem is, it cannot show the data/data is blank in the alert as below code.
this is how i do it
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<div class="card">
<div class="item" ng-controller="ScanCtrl">
<button class="button button-block button-positive" ng-click="scanBarcode()">
<i class="icon ion-qr-scanner"></i>
Scan With Scope
</button>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
controllers.js
angular.module('starter.controllers', [])
.controller('ScanCtrl', function($scope, $cordovaBarcodeScanner){
$scope.scanBarcode = function(){
$cordovaBarcodeScanner.scan().then(function(imgData){
alert(imgData.text);
},function(error){
alert("Error");
}
);
}
});
Any helps would really appreciated.
My app has two kinds of templates. The first is used in "logged out" pages and the second one is used in "logged in" pages.
Below is the index.html which is used with all "logged out" template pages:
<!DOCTYPE html>
<html ng-app="appLoggedOut">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Services 4 Uber</title>
<link href="lib/ionic/css/ionicons.min.css" rel="stylesheet" >
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/loggedout/app.js"></script>
<script src="js/loggedout/controllers.js"></script>
<script src="js/loggedout/routes.js"></script>
<script src="js/loggedout/services.js"></script>
<script src="js/loggedout/directives.js"></script>
<link href="css/app.css" rel="stylesheet">
</head>
<body>
<div>
<div class="spacer" style="width: 300px; height: 15px;"></div>
<ion-nav-view></ion-nav-view>
</div>
<div class="bar bar-footer bar-dark">
Footer for Logged out pages
</div>
</body>
</html>
I need to set all my "logged in" pages to show a header and a different footer. So, it is like I have another index.html, used just for "logged in" pages.
Below is the what I want to use to all my "logged in" pages:
<!DOCTYPE html>
<html ng-app="appLoggedIn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Services 4 Uber</title>
<link href="lib/ionic/css/ionicons.min.css" rel="stylesheet" >
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/loggedin/app.js"></script>
<script src="js/loggedin/controllers.js"></script>
<script src="js/loggedin/routes.js"></script>
<script src="js/loggedin/services.js"></script>
<script src="js/loggedin/directives.js"></script>
<link href="css/app.css" rel="stylesheet">
</head>
<body ng-controller="homeCtrl">
<div class="bar bar-header bar-light">
Header used only in logged in pages
</div>
<div>
<ion-nav-view></ion-nav-view>
</div>
<div class="bar bar-footer bar-dark">
Footer for logged in pages
</div>
</body>
</html>
How can I define my routes, to jump from my login page (using "logged out" template) to a logged page (using "logged in" template) ?
I want to change all the page and not just load a view inside the tag "".
Thanks.
i am only discuss about the How to navigate from one template to another.
ionic that used angularjs or javaScript. is follow the simple call by state or url etc
for example Each controller have routing and there HTML page
angular.module('starter.storeDetailsController', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('storeDetails', {
url: '/user/:store',
abstract:true,
templateUrl: 'templates/store_detail.html',
controller: 'StoreDetailsCtrl'
})
})
.controller('StoreDetailsCtrl', ['$scope', '$ionicLoading', '$timeout', function($scope, $ionicLoading, $timeout) {
$scope.goToNextPage=function(){
$state.go('home'); //here navigate from one template to another
}
}])
And another page
angular.module('starter.homeDetailsController', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
abstract:true,
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
})
.controller('HomeCtrl', ['$scope', '$ionicLoading', '$timeout', function($scope, $ionicLoading, $timeout) {
console.log('Welcome');
}])
above example show two controller StoreDetailsCtrl and HomeCtrl and i go from StoreDetailsCtrl to HomeCtrl in home page. this is navigate by javascript but there are many ways to navigate page.
in HTML side by href=#/url and also used ui-sref="stateName" in ionic for navigate page.
'my-layout' code :
<link rel="import" href="../bower_components/iron-icons/iron-icons.html" >
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" >
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html" >
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html" >
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html" >
<polymer-element name="m-layout" >
<template>
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" style="color: white;" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: 'm-layout',
togglePanel: function() {
this.$.paper_drawer_panel.togglePanel();
}
});
</script>
</polymer-element>
If I add paper-drawer=toogle attribute, paper-icon-button in main drawer is disappear...
'main.jsp' code:
<%# page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/m-layout.html" >
<style>
html, body {
height: 100%;
}
body {
margin: 0;
background-color:#E5E5E5;
}
</style>
</head>
<body>
<m-layout></m-layout>
</body>
</html>
If paper-drawer-toggle attribute remove and main.jsp run, I can see icon-button but toggle is not working..
I can't found reference about paper-drawer-panel toggle and behavior.....
What should I do to toggle paper-drawer-panel?
There are a few things I noticed in your code.
In your my-layout code you should also be importing polymer.html
Which version of Polymer are you using? Since you are using the webcomponents-lite.min.js and the title states Polymer 1.0, I am assuming you are using 1.0. In Polymer 1.0 elements are defined using <dom-module id="m-layout"> instead of <polymer-element name="m-layout">
the toggle function in your script is not necessary, the toggle works out of the box using the paper-drawer-toggle attribute on the paper-icon-button element.
I am not sure of your directory structure but the following code works for me. I am assuming you have bower_components (including all polymer, iron, and paper elements) inside of your root. Also in your root I am assuming you have an elements directory containing your m-layout.html file.
You should check your developer tools in your browser to check that all your resources are loading correctly and there are no errors. If so, then your import paths to the components are wrong.
In your elements/m-layout.html:
<link rel="import" href="../bower_components/iron-icons/iron-icons.html" >
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" >
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html" >
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html" >
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html" >
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="m-layout" >
<template>
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" style="color: white;" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
</template>
</dom-module>
<script>
Polymer({
is: 'm-layout'
// this is not needed
//togglePanel: function() {
// this.$.paper_drawer_panel.togglePanel();
//}
});
</script>
and this in main.jsp:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>My Test</title>
<!-- Load platform support before any code that touches the DOM. -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/m-layout.html">
</head>
<body>
<m-layout></m-layout>
</body>
</html>
Also keep in mind, that the drawer (and therefore the toggle) is only activated when the screen is very small (mobile). To force the drawer behavior no matter what the screen size, you can force the narrow view by setting the force-narrow attribute: <paper-drawer-panel force-narrow="true">. Alternatively you can set the width at which the drawer should be activated, <paper-drawer-panel responsive-width="800px">.
http://jsbin.com/winedi/edit?html,output
<style>
</style>
<template>
<paper-drawer-panel id="drawer">
<div drawer>
drawer
</div>
<paper-header-panel main>
<paper-toolbar class="teal-500">
<paper-icon-button icon="menu" on-tap="menuToggle"></paper-icon-button>
<div class="title">{{toolBarTitle}}</div>
<paper-icon-button icon="search"></paper-icon-button>
</paper-toolbar>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "layout-inbox",
menuToggle: function() {
if (this.$.drawer.narrow && this.$.drawer.getBoundingClientRect().width < parseInt(this.$.drawer.responsiveWidth)) {
this.$.drawer.togglePanel();
} else {
this.$.drawer.forceNarrow = !this.$.drawer.forceNarrow;
}
},
properties: {
toolBarTitle: {
type: String,
value: "lucok"
}
}
});
</script>
</dom-module>
I think your code is working. The paper-drawer-toggle attribute is used to tell the browser to show the menu icon when the screen with is narrow. When you size the screen to a small enough width, you should seen the menu icon appear.
Maybe did you just miss the correct DocType in the head of main.jsp
<!DOCTYPE html>