I've implemented a popover with number keys on it using this library https://github.com/alvarowolfx/ng-keypad.
When I click on an input field, the popover appears. But, sometimes the position of content of popover is not correct.
Can you please help me.
Here is my html:
<script id="keypad-popover.html" type="text/ng-template">
<ion-popover-view class="aiv-keypad">
<ion-content overflow-scroll=false>
<div class="ios">
<ng-keypad on-key-pressed='onKeyPressed'>
<ng-key ng-repeat='key in aivkeys' ng-key-data='key' ng-key-type='keypad.type'>{{key}}</ng-key>
<!--<ng-key ng-key-type='keypad.type' ng-key-data="keypad.data">{{keypad.data}}</ng-key>-->
</ng-keypad>
</div>
</ion-content>
</ion-popover-view>
</script>
In controller,
$ionicPopover.fromTemplateUrl('keypad-popover.html', {
scope: $scope,
backdropClickToClose:false
}).then(function(popover) {
$scope.keypad_popover = popover;
});
Expected,
Sometimes, this problem occurs,
While the problem could be described as overflow scrolling, the overflow-scroll=false attribute you're using on <ion-content> means you are explicitly using Ionic scroll, which is to use transform3d() in CSS to implement scrolling. Usually overflow-scroll=false is the default.
If you'd turn overflow-scroll=true the element would use "traditional" overflow-y: auto CSS rule instead of transform3d(). With popovers, this is usually enough to fix the problem you describe.
If not—you can disable element's scrolling altogether with scroll=false attribute.
My application is built using Angularjs and ionic, using cordova for hybrid mobile application, when trying to render svg content received from backend, application is unable to render expected diagram.
This is how my code looks like
<ion-tab title="Diagram" icon-on="mcfly">
<ion-view>
<ion-content class="padding" ng-class="{'has-loading': header.isLoading}">
<h4>System Diagram</h4>
{{diagram}}
</ion-content>
</ion-view>
</ion-tab>
But what I see is svg data instead of image, am I missing any declaration or any thing ?
Thanks
You need to put it in image tag, like this:
<img class="title-image" src="path to your diagram" width="xxx" height="xxx" />
please check this plunker displaying svg
Directly set overflow-scroll="true" in html is no problem for mouse scroll on desktop browser.
<ion-content padding="true" overflow-scroll="true">
But use $scope.overflow_scroll='true'; in controller, and overflow-scroll="{{overflow_scroll}}" in html, the mouse scroll will not work on desktop browser.
.controller('HomeTabCtrl', function($scope) {
$scope.overflow_scroll='true';
});
and
<ion-content padding="true" overflow-scroll="{{overflow_scroll}}">
Here is the live demo
Any help would be much appreciated. Best Regards.
I want to create a header using ionic framework.
It will show an image and 2 buttons.
The image has to be aligned horizontally to the left and the 2 buttons to the right.
The next code show everything, but the image is centered, is it posible to align the image to the left?
<ion-view title='<img class="title-image" src="img/logo_elizondo_ch.png" />'>
<ion-nav-buttons side="right" >
<button class="button" ng-click="doSomething()">
Right
</button>
<button class="button" ng-click="doSomething()" >
Right 2
</button>
</ion-nav-buttons>
<ion-content>
<ion-list>
<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
You will have a parent for this view ? Namely, a abstract state in app.js file (assuming that you are using of the ionic starters).
That abstract state would have a templateUrl attribute.
Inside that template html file, you will have a directive to alter the header alignment. You can set it's align-title property.
<ion-nav-header align-title="left"></ion-nav-header>
Ofcourse, this answer is based on many assumptions. If you share a codepen of your code, or explain more in detail, that would be better.
UPDATE:
The above is one of the better solutions. Another solution would be to use ionNavTitle
directive.
use css position absolute
.title-image {
position: absolute;
left: 0px:
}
I'm using an AngularJS-based library called "Ionic" (http://ionicframework.com/).
This seems simple, but it isn't working for me.
In one of my views, I have the following
<view title="content.title">
<content has-header="true" padding="true">
<p>{{ content.description }}</p>
<p><a class="button button-small icon ion-arrow-left-b" href="#/tab/pets"> Back to home</a></p>
</content>
</view>
In the controller for the above view, I have
angular.module('App', []).controller('DetailCtrl', function($scope, $stateParams, MyService) {
MyService.get($stateParams.petId).then(function(content) {
$scope.content = content[0];
console.log($scope.content.title); // this works!
});
});
The data for this view is loaded via a simple HTTP GET service (called MyService).
The problem is that when I view this page,
<view title="content.title">
Doesn't display the title. It's just a blank. According to the Ionic documentation (http://ionicframework.com/docs/angularjs/controllers/view-state/), I think I'm doing the right thing.
It's strange that {{content.description}} part works, but content.title doesn't work?
Also, is it because I'm loading the content dynamically (via HTTP GET)?
By using the ion-nav-title directive (available since Ionic beta 14), the binding seems to work correctly.
Rather than
<ion-view title="{{content.title}}">
....
Do this
<ion-view>
<ion-nav-title>{{content.title}}</ion-nav-title>
...
Works a treat.
A solution for newer versions of Ionic is to use the <ion-nav-title> element rather than the view-title property. Just bind your dynamic title inside the content of the <ion-nav-title> using curly brace syntax. Example:
<ion-view>
<ion-nav-title>
{{myViewTitle}}
</ion-nav-title>
<ion-content>
<!-- content -->
</ion-content>
</ion-view>
Here's a working example of how to accomplish this in Ionic. Open the menu, then click "About". When the "About" page transitions, you will see the title that was resolved.
As Florian noted, you need to use a service and resolve to get the desired effect. You then inject the returned result into the controller. There are some down sides to this. The state provider will not change the route until the promise is resolved. This means there may be a noticeable lag in the time the user tries to change location and the time it actually occurs.
http://plnkr.co/edit/p9b6SWZmBKWYm0FIKsXY?p=preview
If you look at ionic view directive source on github, it's not watching on title attributes which means it won't update your view when you set a new value.
The directive is processed before you receive the answer from server and you fill $scope.content.title.
You should indeed use a promise in your service and call it in a resolver. That or submit a pull request to ionic.
I was encountering the same problem and was able to solve it by wrapping my title in double-curlies.
<ion-view title="{{ page.title }}">
I should note that my page.title is being set statically by my controller rather than from a promise.
I had a very similar issue where the title wouldn't update until i switched pages a couple of times. If i bound the title another place inside the page, it would update right away. I finally found in the ionic docs that parts of those pages are cached. This is described here http://ionicframework.com/docs/api/directive/ionNavView/
To solve my issue, I turned caching off for the view with the dynamic title:
<ion-view cache-view="false" view-title="{{title}}">
...
</ion-view>
I got this to work on older versions of Ionic using the <ion-view title={{myTitle}}> solution (as per plong0's answer).
I had to change to <ion-view view-title= in the more recent versions. However using beta-14 it's showing blank titles again.
The nearest I've got to a solution is to use $ionicNavBarDelegate.title(myTitle) directly from the controller. When I run this it shows the title briefly and a moment later blanks it.
Very frustrating.
It's the first time that I worked with dynamic title in Ionic 1.7 and I run into this problem. So I solved using $ionicNavBarDelegate.title(') from the controller, as mentioned Kevin Gurden. But additionally, I used cache-view="false".
View:
<ion-view cache-view="false"></ion-view>
Controller:
angular
.module('app', [])
.controller('DemoCtrl', DemoCtrl);
DemoCtrl.$inject = ['$ionicNavBarDelegate'];
function DemoCtrl($ionicNavBarDelegate) {
$ionicNavBarDelegate.title('Demo View');
}
Use ion-nav-title instead of the directive view-title.
see http://ionicframework.com/docs/api/directive/ionNavTitle/
This is the true solution: data bind the ion-nav-title directive
<ion-view>
<ion-nav-title ng-bind="content.title"></ion-nav-title>
<ion-content has-header="true" padding="true">
<p>{{ content.description }}</p>
<p><a class="button button-small icon ion-arrow-left-b" href="#/tab/pets"> Back to home</a></p>
</ion-content>
</ion-view>
http://ionicframework.com/docs/api/directive/ionNavTitle/
I m using ionic v1.3.3 with side menus based template. I tried all solutions given above but no luck.
I used the delegate from $ionicNavBarDelegate:
http://ionicframework.com/docs/v1/api/service/$ionicNavBarDelegate/
I created a function inside my angular controller to set the title :
angular.module('app.controllers').controller('contributionsCtrl', contributionsCtrl);
function contributionsCtrl($scope, $ionicNavBarDelegate) {
vm.setNavTitle = setNavTitle;
function setNavTitle() {
var title = "<span class='smc_color'> <i class='icon ion-images'></i> Your Title </span>"
$ionicNavBarDelegate.title(title);
}
}
Then inside my html just called the function vm.setNavTitle
<ion-view overflow-scroll=true ng-init="vm.setNavTitle()">
<ion-content></ion-content>
</ion-view>
<ion-view> <ion-nav-title>{{ result.title }}</ion-nav-title>
This work for me