Problem: ionic-angular directives don't work

ionic-v1
1

Hi all,

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!

===
Edit:

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.

2

I don’t know that it will make a difference but you have a minor bug:

has-footer='ture' should be has-footer='true'

See if that helps at all.

3

No it does not work… Thanks for the reply…

4

Can you show us the html of your whole index.html (source and after rendering)?