我有工作 ionic 代码来允许用户输入一个列表，我试图将其分解为一个组件以供重用。但在运行时，我在 js 的第 4 行收到错误 undefined is not a function 。如何解决这个问题？
/*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>
最佳答案
您提到您在项目中使用 Ionic v1.0.0-beta1，我相信该版本的 ionic 与低于 1.3 的 Angular 版本捆绑在一起。
另一方面，Component 是 Angular 1.5 及更高版本中提供的新功能。这解释了为什么您在第 4 行 app.component() 方法 中发现 function is undefined。
我建议您采用以下两种方法之一来解决您的问题:
1) 将组件转换为指令。
2)将ionic升级到v1.3.2(最新版本)，支持Angular 1.5
关于javascript - Angular 'undefined is not a function' 定义组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40554733/