CODEWITHSUNDEEP
javascriptangularjs
Sideshow Bob
Sideshow Bob

Reputation: 4716

Angular 'undefined is not a function' defining component

I had working ionic code to allow the user to input a list, which I tried to factor out into a component for re-use. But on running I get the error undefined is not a function in line 4 of the js. How can this be fixed?

/*jshint multistr: true */         
var app = angular.module('ionicApp', ['ionic']);

app.component('inputlist',{
    bindings: {label: '@'},
    template: '\
        <div class="list">\
            <div class="item item-button-right">\
                <ion-label floating>Enter {{$ctrl.label}} below then press +</ion-label>\
                <input type="text" ng-model="nameinput.name"></input>\
                <button class="button button-assertive" ng-click="addItem()">+</button>\
            </div>\
            <div class="item item-button-right" ng-repeat="item in items track by $index">\
                <ion-label>{{item.name}}</ion-label>\
                <button class="button button-positive" ng-click="items.splice($index,1)">-</button>\
            </div>\
        </div>',
    controller: function() {
        this.items = [];
        this.nameinput = {name:''};
        this.addItem = function(){
            var name = this.nameinput.name.trim();
            if (name!=="") 
            {
                this.items.push({name:name});
                this.nameinput={name:""};
            }
        };
    }    
});

html

<!DOCTYPE html>
<html ng-app="ionicApp">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Ionic-AngularJS-Cordova</title>

  <!-- Ionic framework - replace the CDN links with local files and build -->    
  <link href="lib/ionicframework/ionic.min.css" rel="stylesheet">
  <script src="lib/ionicframework/ionic.bundle.min.js"></script>

  <script src="js/app.js"></script>

  <script src="cordova.js"></script>

</head>


  <body>

    <ion-content>

        <inputlist label="foo"></inputlist>

    </ion-content>

</body>
</html>

Upvotes: 0

Views: 72

Answers (1)

whyyie
whyyie

Reputation: 792

You mentioned that you are using Ionic v1.0.0-beta1 in your project, which i believe that this version of ionic comes bundle with angular version below 1.3.

Component, on the other hand, is a new feature available in angular 1.5 and above. This explains why you got function is undefined in line 4 app.component() method.

I would suggest you to take either one of these 2 approach to resolve your issue:
1) Convert component to directive.
2) Upgrade the ionic to v1.3.2 (latest version) which supports angular 1.5

Upvotes: 2

Related Questions