I have gone through many answers, but nothing worked for me. I have a simple .html file and ionic content just does not scroll.
<!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">
<!-- 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/platformOverrides.js"></script>
<script src="scripts/angular-resource.min.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/angular-sanitize.min.js"></script>
<script src="scripts/angular-ui-router.js"></script>
<script src="scripts/angular-resource.js"></script>
<script src="scripts/lodash.min.js"></script>
<script src="js/app.js"></script>
<script src="js/appController.js"></script>
</head>
<body ng-app="app" ng-controller="appController">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-view>
<ion-content scroll="true">
<div class="scroll">
<a ng-repeat="item in items" class="item" href="#">
<h2>{{item.name}}</h2>
</a>
</div>
</ion-content>
</ion-view>
</ion-pane>
</body>
</html>
Above, $scope.items is being fetched from some webservice. Everything renders fine but it just does not scroll.
I am using Visual studio 'Ionic Blank Template' if that matters. I have configured Cordova correctly and rest all solutions just work fine.
Remove the class="scroll" from the div container, scroll="true" from ion-content and add overflow-scroll="true" . The required classes will be added by ionic on the elements. You don't need to add that explicitly
<ion-view>
<ion-content overflow-scroll="true">
<div class="list">
<a ng-repeat="item in items" class="item" href="#">
<h2>{{item.name}}</h2>
</a>
</div>
</ion-content>
</ion-view>
Update: The codepen showing the scrollable list in chrome simulator: http://codepen.io/addi90/full/RaOegM/
In ionic v1.3.3 or later, scroll on is not working. this can be solved by placing overflow-scroll="false" in or defining as
<ion-content overflow-scroll="false">
OR
<ion-scroll scrollX="true" scrollY="true" style="margin:17rem; position:fixed; display:inline; top:0; right:0; bottom:0; left:0; white-space: nowrap;">
will help.
Sandy to hide the scrollbar try to add ::-webkit-scrollbar {display:none;} to your css file. It worked for me.
Related
The script below does not perform the calculation {{ 5+ 15 }}, it just returns "5+ 15" as seen in this image
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>
<script src="lib/ionic/js/angular/angular-animate.js"></script>
<script src="lib/ionic/js/angular/angular-sanitize.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<script src="lib/ionic/js/angular/angular.js"></script>
<script src="lib/ionic/js/angular/angular.min.js"></script>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">
<div style="color:#FF00FF" align="center">Ionic Testing</div>
</h1>
</ion-header-bar>
<ion-content>
<div ng-app="FirstModule" ng-controller="myFirstControl">
<input type="text" ng-model="FirstName" name="FirstName">
<input type="text" ng-model="SecondName">
<span ng-bind="FirstName"></span> Full Name: {{ 5+ 15 }}
</div>
</ion-content>
</ion-pane>
</body>
</html>
I just edited your question and noticed that you have ng-app declared twice:
There is one on the <body> tag and another on the first <div> inside <ion-content>.
Remove one of these (doesn't matter which) and your calculation should work as expected.
I got excited over the prospects of AngularJS. So I started learning it right away. However, to my dismay, AngularJS doesn't render content well on slow internet connections as you can see from the screenshots.
My Flask App basically displays my Linux machines details. I do this by running an ajax call to the server-side code and return json which I then display to the browser using Angular.
Is this a known problem with the framework or is it the way am writing my code. I call Angularjs at the footer as rendered by many users.
Here's a skeleton structure of my html page
<!DOCTYPE html>
<html >
<head>
<title>My flask app</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-glyphicons.css') }}">
<!-- font awesome -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css') }}">
<!-- custom-->
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body ng-app="flaskApp">
<header>
<div class="container">
<h1 class="logo">Flask App</h1>
<strong><nav>
<ul class="menu">
<li>Home</li>
<li>About</li>
</ul>
</nav></strong>
</div>
</header>
<div class="container">
{% block content %}
{% endblock %}
</div>
<!-- Jquery JS-->
<script src="{{ url_for('static', filename='js/jquery-1.11.3.min.js')}}"></script>
<!-- Angular JS-->
<script src="{{ url_for('static', filename='js/angular.js')}}"></script>
<!-- Bootstrap JS -->
<script src="{{ url_for('static', filename='js/bootstrap.min.js')}}"></script>
<!-- Custom JS -->
<!-- <script src="{{ url_for('static', filename='js/admin.js')}}"></script> -->
<script src="{{ url_for('static', filename='js/cmd.js')}}"></script>
</body>
</html>
Take a look at ngClock directive. It is used to prevent Angular from displaying uncompiled templates.
Add this to your CSS file:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
and include de ng-cloak directive where you want. I usually put it in the body tag.
The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad.
Codepen is here
http://codepen.io/jcbowyer/pen/wGrLmE
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Mobile Loves AngularJS</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
<!-- the application CSS file -->
<link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application ng-app="sushiMobileApp">
<kendo-mobile-view id="index">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
Home View
<button kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile" k-on-click="mnuProfile.open($('#btnProfile'))"></button>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<ul kendo-mobile-action-sheet="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
<li>Login</li>
<li ng-hide="(authentication.token.length == 0)">Logout</li>
<li>My Profile</li>
</ul>
</kendo-mobile-view>
<script>
angular.module('sushiMobileApp', [ 'kendo.directives' ]);
</script>
</body>
</html>
I figured out how to get this work with k-rel insteal of open.
Updated code is below
Codepen here
http://codepen.io/jcbowyer/pen/KzyQwa
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Mobile Loves AngularJS</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
<!-- the application CSS file -->
<link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application ng-app="sushiMobileApp">
<kendo-mobile-view id="index">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
Home View
<a kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile"
k-rel="'actionsheet'"
href="#mnuProfile"></a>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<ul kendo-mobile-action-sheet="mnuProfile" id="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
<li>Login</li>
<li ng-hide="(authentication.token.length == 0)">Logout</li>
<li>My Profile</li>
</ul>
</kendo-mobile-view>
<script>
angular.module('sushiMobileApp', [ 'kendo.directives' ]);
</script>
</body>
</html>
I couldn't make a simple AngularJS to work on my ionic application. It is saying the function got undefined.
First these are the essential files for my project
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">
<link href="css/glsmile.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.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="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/main.js"></script>
</head>
<body ng-app="">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">GL Smile Filter</h1>
</ion-header-bar>
<ion-content>
<div id="wrapper">
{{1+1}}
<div ng-controller="StoreController">
</div>
<select>
<option selected>Choose your region</option>
<option>Mississsauga</option>
<option>North York</option>
</select>
<br>
<select>
<option selected>School near by</option>
<option>University Of Toronto</option>
<option>Waterloo</option>
<option>Sheridan College</option>
</select>
<input type="range" name="rangePrice" min="0" max="600" id="rangePrice"
oninput="showVal(this.value)" onchange="showVal(this.value)">
<p div style="display:inline; float:left;">$0</p> <p div style="display:inline; float:right;">$600</p>
<div style="clear: both"></div>
<span id="amount">Amount:</span> <span id="valBox">$300</span>
<button class="button button-small button-royal" id="buttonGo" style="float:right;">
Go
</button>
</div>
<i class="icon ion-star"></i>
</ion-content>
</ion-pane>
<script>
function showVal(newVal){
document.getElementById("valBox").innerHTML="$" + newVal;
}
</script>
</body>
</html>
App.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
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();
}
});
});
My angular.js file
function StoreController() {
alert('Its working!');
}
So when I did this to test my function,
it says that the StoreController function is undefine... I hope someone could help!
You need to include the js file in your html below where you have included your app.js
<script src="js/angular.js"></script>
All the js scripts that you write, needs to included in the html to work, same goes with css.
I'm following some of the examples from the website and my current html is:
<!DOCTYPE html>
<html ng-app="Test">
<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">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.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="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
<!-- Center content -->
</ion-nav-view>
<script type="text/ng-template" id="main.html">
<ion-view view-title="Home">
<ion-content >
<p>
Test
</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
And the js:
var app = angular.module('Test', ['ionic']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider.state('index', {
url: '/',
templateUrl: 'main.html',
controller: 'TestCtrl'
})
})
app.controller('TestCtrl', function($scope) {
})
Now the documentation says the view-title="Test" should fill the title in ion-navbar. But it doesn't seem to work. Anyone knows what is going wrong?
It appears that it can be used in both ways,
<ion-view view-title="My Page">
or
<ion-nav-title>
{{page.title}}
</ion-nav-title>
as per latest version of ionic.
http://ionicframework.com/docs/api/directive/ionView/
http://ionicframework.com/docs/api/directive/ionNavTitle/
This should work,
<ion-view>
<ion-nav-title> Your title here
</ion-nav-title>
</ion-view>
Switch to using <ion-nav-title>
<ion-view>
<ion-nav-title>{{navTitle}}</ion-nav-title>
<ion-content overflow-scroll="true" padding="true" class="has-header">
<div>
<p>The opening crawl would go here.</p>
</div>
</ion-content>
click to read more
Ionic is continuously working and they would updating the directives in upcoming releases and I assume that you are using old version.
As per the 1.0.0-beta.13 doc, Attribute should be title instead of view-title
Change the following line
<ion-view view-title="Home">
to
<ion-view title="Home">
Old version Doc: http://ionicframework.com/docs/1.0.0-beta.13/api/directive/ionView/
But in latest version, it should be view-title
Latest doc: http://ionicframework.com/docs/api/directive/ionView/