I added a ion-nav-button exactly as documented (direct descendant of the ion-view) and added an ng-click event that isn't firing.
Any idea why?
I attached a plunkr of the issue.
http://plnkr.co/edit/cZ9wDlhJJzebBr1WR3rT?p=preview
Thanks! Uri
<ion-view title="Dashboard">
<ion-nav-buttons side="right">
<button class="button" ng-click="alert('signup btn clicked');">
Signup
</button>
</ion-nav-buttons>
<ion-content class="has-header padding">
<h1>Ionic scroll</h1>
<p>On iphone tapping slightly above or below text doesn't open keyboard.</p>
<input type="text" name="name" style="border: 1px solid grey;">
</ion-content>
</ion-view>
That's because in the DashController there is no function alert(...);
The ng-click="alert('xx') is translated in to $scope.alert('xx');
So if you create in the DashController:
$scope.alert = function(text) {
alert(text);
}
it will work.
This answer is for those who are wondering why ng-click is not working even after writing the function in the Controller. Please check whether you have mentioned the controller as shown below:
$stateProvider
.state('dashboard', {
url: '/',
templateUrl: 'dashboard.html',
controller: 'DashController'
})
Related
I have a kendo-popup in an angular component which I use within a kendo-dialog. The popup will be shown next to an icon when the user clicks on the icon. The positioning of the popup works fine when it is not inside a kendo-dialog. But the positioning is not correct when it is within a kendo-dialog. When the button is clicked within the kendo-dialog, the popup does not show up next to the icon. It shows up somewhere else.
Angular 2 Component 1 <comp-1>:
<span>
<input type="text" #anchor />
<button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
</button>
</span>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
Angular 2 Component 2:
<div click="openDialog()"></div>
<div>
<kendo-dialog *ngIf="showDialog">
<comp-1></comp-1>
</kendo-dialog>
</div>
When I click the div to open the dialog, the kendo-popup does not show next to the input tag. It shows up somewhere to the lower right.
Edit 1:
Tried moving the popup to within the span. Still not working.
Angular 2 Component 1 <comp-1>:
<span>
<input type="text" #anchor />
<button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
</button>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
</span>
Angular 2 Component 2:
<div click="openDialog()"></div>
<div>
<kendo-dialog *ngIf="showDialog">
<comp-1></comp-1>
</kendo-dialog>
</div>
Note: I have intentionally left out the styles. In the original source, I have all the styles setup properly.
You have to specify where the popup will display by using an id of anchor on the target element:
<div>
<target-tag #anchor></target-tag>
</div>
<div>
<kendo-popup [anchor]="anchor">
<Content to display>
</kendo-popup>
</div>
I have a Kendo Angular2 Slack: https://kendouiangular2.slack.com
I tried to replicate the issue in a standalone Plunker demo, but it seems that the popup positions just fine in Kendo Dialog component:
Tested in Chrome and Safari.
This is the dialog content:
<input #anchor style="width: 100px"/>
<button kendoButton (click)="toggle()">Toggle</button>
<kendo-popup *ngIf="popupOpen" [anchor]="anchor" style="width: 100px">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</kendo-popup>
And this is the actual test Plunker demo:
http://plnkr.co/edit/Y3oBZwa8xf0WiP462jW7?p=preview
Could you modify it in order to reproduce the issue? This will help to find the cause of the erroneous behavior faster.
please use div id which div you want to popup.
<div id="popupdiv"></div>
$("#popupdiv").kendoWindow({
title: "Inforamtion",
resizeable: true,
scrollable: false,
width: "50%",
actions: ["Pin", "Close"],//["Pin", "Refresh", "Maximize", "Close"],
modal: true,
// pinned: true,
animation: {
close: {
effects: "fade:out"
},
}
});
Using ionic pull to refresh function does not update my list. Function is called and in console data is retrieved from serve but does not refresh my list.
here is my view:
<ion-list>
<ion-item class="list card" ng-repeat="pickup in pickups">
<div class="item">
<h2>{{pickup.title}}</h2>
<p>Request Date : {{pickup.added_date}}</p>
<p>Status :
<span class="positive" ng-if="pickup.status==0">On Queue</span>
<span class="energized" ng-if="pickup.status==1">On Process</span>
<span class="balanced" ng-if="pickup.status==2">On Collected</span>
<span class="assertive" ng-if="pickup.status==2">Cancelled</span>
</p>
</div>
<div class="item item-body">
<p>Contact : {{pickup.b_contact}}</p>
<p>Location : {{pickup.b_location}}</p>
<p>
<a class="button circular-btn icon ion-android-done button-energized" href="#"
ng-click="statusData(pickup.pickupid,pickup.user_id,1)"
ng-if="pickup.status==0"></a>
<a class="button circular-btn ion-android-done-all button-balanced" href="#"
ng-click="statusData(pickup.pickupid,pickup.user_id,2)"
ng-if="pickup.status==0|| pickup.status==1"></a>
<a class="button circular-btn icon ion-close-circled button-assertive" href="#"
ng-click="statusData(pickup.pickupid,pickup.user_id,3)"
ng-if="pickup.status==0|| pickup.status==1|| pickup.status==2"></a>
</p>
</div>
</ion-item>
</ion-list>
</ion-content>
my controller code:
.controller('AppCtrl', function ($scope, Service, $ionicLoading, $ionicModal, $ionicPopup, $timeout, $state, $http, $stateParams) {
$scope.doRefresh = function () {
Service.getpickup($state, $http).success(function (data) {
$scope.pickups = data.pickup_request;
console.log(data.pickup_request);
})
.finally(function () {
$scope.$broadcast('scroll.refreshComplete');
});
}
});
Please guide me. Thanks in advance.
Have you used the ion-refresher tag in your html? I cant see it in your code. If not, use this
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
Also, try manually adding the items to your list like this and see if that works. (check that data.pickup_request is an array as well)
$scope.pickups.push.apply($scope.pickups, data.pickup_request);
I have found the issues. I have the view in pickupCtrl but i was calling the scope function in another control. Thank you every one for your guide.Thanks a lot.
I'm making a simple app that keeps track of my hours at work. I'm developing the app for android and I'm having a problem with the scrolling.
Structure of the App:
I have a header bar and a footer which are both outside of the < ion-content > tab, so I don't expect that to be scrollable. Within the < ion-content > I have used an < ion-side-menus > tab and finally within the < ion-side-menu-content > tab I have put in a < ion-nav-view > tab which is controlled by my state provider.
Everything works fine, the menu is operational and the views change according to their design. Within one of my views I have a list that exceeds the size HERE IS WHERE THE PROBLEM BEGINS!. When using a computer, I can pull the page down (as if I were trying to refresh it) but when I try to scroll down the page goes straight to the top of the list unless I keep dragging and have my finger on the left click. Furthermore the rest of the content in the list is not loaded. The listed is literally cropped to where it stopped before I dragged down. When I export it to an android app I cant even drag to scroll. The scrolling is literally non-functional.
I've attached some code
var app = angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: "views/home.html",
controller: "MainController"
})
.state('rotas', {
url: '/rotas',
templateUrl: "views/rotas.html",
controller: "MainController"
})
.state('update', {
url: '/update',
templateUrl: "views/update.html",
controller: "UpdateController"
});
$urlRouterProvider.otherwise('/');
});
.scroll {
height: 100%;
}
/* Before i put in this CSS element, the content in the view was cropped SIGNIFICANTLY. not sure exactly what it does but it solved my problem. All other CSS elements are colour changes*/
index.html
<html>
<head>...</head>
<body ng-app="starter" ng-controller="MainController">
<ion-pane>
<ion-header-bar class="bar-stable">
<!--header bar -->
<h1 class="title">Shiftwiz.{{controllerCheck}}</h1>
</ion-header-bar>
<div class="bar bar-footer bar-stable">
<!--footer-->
<table id="footer-table">
<tr>
<td>
<a ui-sref="rotas" ng-click="activity.doRotas()">
<div>Rotas</div>
</a>
</td>
<td>
<a ui-sref="update" ng-click="activity.doUpdate()">
<div>Update</div>
</a>
</td>
</tr>
</table>
</div>
<ion-content>
<ion-side-menus>
<ion-side-menu-content overflow-scroll="true">
<!--menu-->
<button class="button button-full button-positive" ng-click="toggleLeft()">
Rotas: {{activity.rotas}} Update: {{activity.update}}
</button>
<ion-nav-view overflow-scroll="true"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-item>Next Week</ion-item>
<ion-item ng-click="toggleLeft(); activity.chooseThisWeek(); calcDates()">This Week</ion-item>
<div id="further-weeks" ng-show="activity.rotas">
<ion-item>Last Week</ion-item>
<ion-item>Last Two</ion-item>
<ion-item>Last Three</ion-item>
</div>
</ion-side-menu>
</ion-side-menus>
</ion-content>
</ion-pane>
</body>
</html>
update.html
<!-- this view contains the list which isn't rendering-->
<div class="card" ng-repeat="day in unPublishedRota">
<a ng-click="day.toggleState()">
<div class="item item-divider">
<p class="day">{{ day.date | date:"EEEE" }}
<br />{{day.date | date:"d, MMM y"}}</p>
<p class="times">{{day.start}} | {{day.finish}}
<br />{{day.hours}} hrs</p>
</div>
</a>
Your update.html contents should be wrapped in <ion-view> and <ion-content> elements.
<ion-view>
<ion-content>
<div class="card" ng-repeat="day in unPublishedRota">
<a ng-click="day.toggleState()">
<div class="item item-divider">
<p class="day">{{ day.date | date:"EEEE" }}
<br />{{day.date | date:"d, MMM y"}}</p>
<p class="times">{{day.start}} | {{day.finish}}
<br />{{day.hours}} hrs</p>
</div>
</a>
</div>
</ion-content>
</ion-view>
You can also have a look at a working sidemenu example by Ionic.
<button class="button button-outline button-positive">
fes
</button>
If I use ng-click, it's works fine, but I need href.
Drop the button and decorate the a element with the class names.
fes
hope this helps.
in html page:
<button menuClose ion-item (click)="openExternalPage(urlCgu)"><ion-icon name="ios-paper-outline" color="primary" item-start ></ion-icon> Conditions d'utilisation</button>
in ts page:
urlCgu:string;
this.urlCgu = 'http://xxxxxxx.com';
openExternalPage(page){
window.open(page);
}
I'm trying to scroll down to delegate-handle="start" with ionic on load. When i try to run it, i get this message in console.
Delegate for handle "small" could not find a corresponding element with delegate-handle="small"! scrollTop() was not called!
Possible cause: If you are calling scrollTop() immediately, and your element with delegate-handle="small" is a child of your controller, then your element may not be compiled yet. Put a $timeout around your call to scrollTop() and try again.
My code looks like this, can somebody maybe see what is wrong?
$timeout(function() {
$ionicScrollDelegate.$getByHandle('start').scrollTop();
}, 10);
If i use $ionicScrollDelegate.scrollBottom(), it will scroll to the bottom, so it must be a problem with the specific function.
The html code
<ion-view title="Kalender">
<ion-content>
<ion-list ng-repeat="activity in calendar">
<div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
<div class="header-divider-small">{{activity.year}}</div>
<div class="header-divider">{{activity.date_divider}}</div>
</div>
<div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
<span class="header">{{activity.name}}</span>
<br />
<span class="text">{{activity.time}} - {{activity.place}}</span>
<a class="button button-icon icon {{activity.icon}} right not-selected"></a>
</div>
</ion-list>
<div delegate-handle="start"></div>
</ion-content>
</ion-view>
Thanks.
Ionic 1.0.0-beta14 has some strange issue with getByHandle() so you can do it this way:
$timeout(function() {
var startHandle = _.find($ionicScrollDelegate._instances, function (s) {
return s.$$delegateHandle === "start";
});
startHandle.scrollTop();
});
Solution source at forum.ionicframework.com
I think there is a misunderstanding about what the delegate handle does here. Delegate handle is a way to name scroll/content containers. Think of it like a way to give your <ion-content> container a unique name that can be later used with the service. It is possible to have multiple <ion-content> containers on a single view, and this is why the naming is necessary. If you only have one scroll area or don't specify the handle, then it just uses the first view it finds.
You want to scroll to a particular place in the application, which is the job of $ionicScrollDelegate.anchorScroll('element-id');. Take a look at your code here with some modifications. I've put the delegate handle in the correct place, and then use the anchorScroll method to automatically scroll to that ID in the page.
Markup
<ion-view title="Kalender">
<ion-content delegate-handle="kalendar">
<ion-list ng-repeat="activity in calendar">
<div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
<div class="header-divider-small">{{activity.year}}</div>
<div class="header-divider">{{activity.date_divider}}</div>
</div>
<div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
<span class="header">{{activity.name}}</span>
<br />
<span class="text">{{activity.time}} - {{activity.place}}</span>
<a class="button button-icon icon {{activity.icon}} right not-selected"></a>
</div>
</ion-list>
<div id="start"></div>
</ion-content>
</ion-view>
Controller
$timeout(function() {
$ionicScrollDelegate.$getByHandle('kalendar').anchorScroll('start');
}, 10);
Specify the dalegate-handler in ion-content
<ion-view title="Kalender">
<ion-content delegate-handle="start">
<ion-list ng-repeat="activity in calendar">
<div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
<div class="header-divider-small">{{activity.year}}</div>
<div class="header-divider">{{activity.date_divider}}</div>
</div>
<div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
<span class="header">{{activity.name}}</span>
<br />
<span class="text">{{activity.time}} - {{activity.place}}</span>
<a class="button button-icon icon {{activity.icon}} right not-selected"></a>
</div>
</ion-list>
</ion-content>
</ion-view>
Scroll top can be achieved by forgetting the scroll position which can be achieved by using
$scope.$on("$destroy", function() {
var delegate = $ionicScrollDelegate.$getByHandle('start');
delegate. forgetScrollPosition();
});
Use
$ionicScrollDelegate.$getByHandle('start').scrollTop(); //To scroll to Top.
As I noticed delegate-handle won't work if used with overflow-scroll.
I managed to do it this way:
$scope.scrollHandle = some-handle-value-that-you-want-to-use;
$scope.$on('$ionicView.loaded', function () {
$timeout(function () {
scrollView = $ionicScrollDelegate._instances.filter(function (s) {
if (!s.$$delegateHandle) return false;
return $parse(s.$$delegateHandle.slice(2, -2))
(angular.element(s.element).scope()) == $scope.scrollHandle;
})[0];
}).then(function () {
scrollView.scrollTo(0, 0, false);
});
});
In the template:
delegate-handle="{{scrollHandle}}"
EDIT:
This doesn't work anymore, check this answer for new solution: https://stackoverflow.com/a/32123613/1630623