I am developing a mobile web app using ionic (css, js, angularjs). However, I encountered a very weird problem. I use a
card div in my page, but the card height seems too large to fit in an iPhone screen, so I use a
content directive to wrap it and set the
scroll attribute to
true. The whole page is written like this (in jade):
.bar.bar-header.bar-light h1.title Emotif content(has-header='true' has-footer='ture' scroll='true') .list.card.content-spacer(ng-model='video') //card content .tabs.tabs-icon-top //footer tabs
I hope that I can make the page scrollable on a iPhone safari screen. But it just does not work. The whole screen looks like:
Not that there are still a lot of content on the card.
Then I further found that the ionic-angular directives don’t work well on my app. I include the scripts in this way:
<link rel="stylesheet" href="bower_components/ionic/release/css/ionic.css" /> <body ng-app="emotifAppApp"> <div class="container" ng-view> //body goes here <script src="bower_components/jquery/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-resource/angular-resource.js"></script> <script src="bower_components/angular-cookies/angular-cookies.js"></script> <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="bower_components/angular-animate/angular-animate.js"></script> <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> <script src="bower_components/ionic/release/js/ionic.js"></script> <script src="bower_components/ionic/release/js/ionic-angular.js"></script> //other scripts goes here
The app is scaffolded by
Yeoman, I use
Bower for dependency management, and use
Grunt to serve and build the application. I use ionic 0.9.24 and AngularJS v1.2.6. I am pretty new to ionic and angularJS, so that any idea will be very helpful to me. Thanks!
I found the following dependencies in my bower file:
"angular": "1.2.10", "angular-animate": "1.2.10", "angular-sanitize": "1.2.10", "angular-ui-router": "0.2.7"
Is this a hard dependency? I am using angular 1.2.6.