Why am I getting this JavaScript error when I try use lists in Ionic?

Question

Every time I try use a list in my app it never works, I opened the dev tools and for some reason im getting the following errors, I'm new to these languages so and help at all is appreciated. I tryed declaring a var any passing it through the function as thats what I though the error was telling me to do but that didn't work.

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>calorific</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 ng-app="calorific" ng-controller="calCtrl">
<ion-pane>

  <ion-content>
  <p></p>
  <div class="card">
       <div class="item item-text-wrap">                                          
          This is a basic Card which contains an item that has wrapping text.
          </div>
        </div>
    <ion-list>
        <ion-item ng-repeat="items in item"{{items.name}}> </ion-item>
    </ion-list>
  </ion-content>
</ion-pane>
</body>
</html>

JS:

 angular.module('calorific', ['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();
 }
 });
 })

app.controller("calCtrl", function($scope) {
$scope.items= [
    {name: 'apple'},
    {name: 'banana'},
    {name: 'banana'},
    {name: 'banana'}
    ]
});

Error:

GET http://localhost:8100/css/style.css 
app.js:17 Uncaught ReferenceError: app is not defined
ionic.bundle.js:19526 Error: [ng:areq] Argument 'calCtrl' is not a function,  got undefined
http://errors.angularjs.org/1.3.13/ng/areq?    p0=calCtrl&p1=not%20a%20function%2C%20got%20undefined
at REGEX_STRING_REGEXP (ionic.bundle.js:7982)
at assertArg (ionic.bundle.js:9499)
at assertArgFn (ionic.bundle.js:9509)
at ionic.bundle.js:16350
at ionic.bundle.js:15518
at forEach (ionic.bundle.js:8250)
at nodeLinkFn (ionic.bundle.js:15505)
at compositeLinkFn (ionic.bundle.js:14997)
at publicLinkFn (ionic.bundle.js:14876)
at ionic.bundle.js:9369

mohamedrias · Accepted Answer · 2015-04-06 15:21:13Z

4

In this line you have specified app

app.controller("calCtrl", function($scope) {

But it's not defined anywhere.

Either remove that app, it will be like:

angular.module('calorific', ['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();
 }
 });
 })

.controller("calCtrl", function($scope) {
$scope.items= [
    {name: 'apple'},
    {name: 'banana'},
    {name: 'banana'},
    {name: 'banana'}
    ]
});

Else, use like below:

 angular.module('calorific').controller("calCtrl", function($scope) {

answered Apr 6, 2015 at 15:21

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why am I getting this JavaScript error when I try use lists in Ionic?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related