Javascript 角度'；未定义不是一个函数'；定义组件_Javascript_Angularjs

Javascript 角度'；未定义不是一个函数'；定义组件

javascript angularjs

Javascript 角度'；未定义不是一个函数'；定义组件,javascript,angularjs,Javascript,Angularjs,我有一个工作的离子代码，允许用户输入一个列表，我试图将其分解成一个组件，以便重用。但是在运行时，我得到的错误undefined不是js第4行中的函数。如何解决这个问题 /*jshint multistr: true */ var app = angular.module('ionicApp', ['ionic']); app.component('inputlist',{ bindings: {label: '@'}, template: '\

我有一个工作的离子代码，允许用户输入一个列表，我试图将其分解成一个组件，以便重用。但是在运行时，我得到的错误

undefined不是js第4行中的函数。如何解决这个问题
/*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:""};
            }
        };
    }    
});

/*jshint multistr:true*/
var-app=angular.module（'ionicApp'，['ionic']）；
应用程序组件（'inputlist'{
绑定：{label:'@'}，
模板：'\
\
\
在下方输入{{$ctrl.label}}，然后按+\
\
+\
\
\
{{item.name}\
-\
\
',
控制器：函数（）{
此参数为.items=[]；
this.nameinput={name:'}；
this.addItem=函数（）{
var name=this.nameinput.name.trim（）；
如果（名称！==“”）
{
this.items.push（{name:name}）；
this.nameinput={name:：}；
}
};
}    
});

html

科尔多瓦鳗鲡
您提到您在项目中使用的是Ionic v1.0.0-beta1，我相信Ionic的这个版本附带了1.3以下的angular版本
另一方面，组件是angular 1.5及以上版本中提供的新功能。这解释了为什么在第4行app.component（）方法中未定义get函数
我建议您采取以下两种方法之一来解决您的问题：

1） 将组件转换为指令。

2） 将ionic升级到v1.3.2（最新版本），该版本支持angular 1.5
您提到您在项目中使用的是ionic v1.0.0-beta1，我相信该版本的ionic附带angular 1.3以下的版本
另一方面，组件是angular 1.5及以上版本中提供的新功能。这解释了为什么在第4行app.component（）方法中未定义get函数
我建议您采取以下两种方法之一来解决您的问题：

1） 将组件转换为指令。

2） 将ionic升级到支持angular 1.5的v1.3.2（最新版本）
您使用的angular版本是什么？实际上是与Intel XPM捆绑在一起的ionic版本，从ionic.bundle.js
的标题判断，它是ionic v1.0.0-beta.1。我不知道下面使用的是哪个版本的Angular，也不知道如何找到？您使用的是哪个版本的Angular？实际上，从Ionic.bundle.js的标题判断，它是与Intel XPM捆绑在一起的Ionic版本，是Ionic v1.0.0-beta.1。我不知道下面使用的是哪个版本的Angular，也不知道如何找到它？
<!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>