Angular JS和TypeScript-错误：ng：areq错误参数“参数'XXXXXX'不是函数，未定义”
[英]Angular JS & TypeScript - Error: ng:areq Bad Argument “Argument 'XXXXXX' is not a function, got undefined”
问题描述
Keep getting an error specified in the title. 
不断收到标题中指定的错误。
I split models and controllers into separate files stored under models and controllers directories respectively. 我将模型和控制器分成单独的文件，分别存储在模型和控制器目录下。
When I tried to link them up, I got an error saying " ng:areq Bad Argument "Argument 'rightPaneCtrl' is not a function, got undefined ". 当我尝试将它们链接起来时，出现错误消息“ ng：areq Bad Argument“参数'rightPaneCtrl'不是函数，未定义 ”。
What's wrong with my code? 我的代码有什么问题？
index.html↓ index.html的↓
<html ng-app="rightpaneMVC" data-framework="typescript">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<!--<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>-->
<style>
.item_list {
display: flex;
flex-direction: row;
padding-left: 0;
}
.item_list > li {
list-style-type: none;
cursor: pointer;
border: 1px solid black;
padding: 0.3rem;
width: 100px;
margin-right: 0.2rem;
}
</style>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
</head>
<body>
<div id="tab-category" ng-controller="rightPaneCtrl">
<!--<ul>
<li ng-repeat="tab in vm.tabs track by $index" ng-click="vm.handleTabClick(tab,$index)">
<a href="#{{ tab.tabID }}">{{ tab.name }}{{ tab.tabID }}</a>
<span ng:class="{true:'ui-icon ui-icon-circle-close ui-closable-tab', false:''}[$index!=0]"></span>
</li>
</ul>-->
<hr />
<tabset ng-init="startActive = true">
<tab ng-repeat="tab in vm.tabs track by $index" active="startActive">
<tab-heading ng-switch="tab.isClosable">
<div ng-switch-when=true>
{{ tab.name }} <a ng-click="vm.handleTabClick($index)" href=''><i class="icon-remove"></i></a>
</div>
<div ng-switch-when=false>
{{ tab.name }}
</div>
</tab-heading>
<ul class="item_list" ng-switch="tab.categoryTypeString">
<li ng-switch-when="DAI" ng-repeat="item in tab.items" ng-click="vm.handleItemClick(item)">
<img ng-src="{{item.thumbnailPath}}"><br />
<p align="center">{{ item.categoryName }}</p>
</li>
<li ng-switch-when="CHU" ng-repeat="item in tab.items" ng-click="vm.handleItemClick(item)">
<img ng-src="{{item.thumbnailPath}}"><br />
<p align="center">{{ item.categoryName }}</p>
</li>
<li ng-switch-default ng-repeat="item in tab.items">
<img ng-src="{{item.thumbnailPath}}"><br />
<p align="center">{{ item.categoryName }}</p>
</li>
</ul>
</tab>
</tabset>
<!--<div ng-repeat="tab in vm.tabs track by $index" id="{{ tab.tabID }}">
<ul class="item_list" ng-switch="tab.categoryTypeString">
<li ng-switch-when="DAI" ng-repeat="item in tab.items" ng-click="vm.handleItemClick(item)"> {{ item.categoryName }}</li>
<li ng-switch-when="CHU" ng-repeat="item in tab.items" ng-click="vm.handleItemClick(item)"> {{ item.categoryName }}</li>
<li ng-switch-default ng-repeat="item in tab.items"> {{ item.categoryName }}</li>
</ul>
</div>-->
</div>
<script src="//code.angularjs.org/1.4.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.4.0/ui-bootstrap-tpls.min.js"></script>
<script src="Application.js"></script>
<script src="controllers/RightPaneCtrl.js"></script>
</body>
</html>
Application.ts↓ Application.ts↓
module rightpane {
'use strict';
angular.module('rightpaneMVC', ['ui.bootstrap']);
angular.module('rightpaneMVC').controller('rightPaneCtrl', RightPaneCtrl);
}
RightPaneCtrl.ts↓ RightPaneCtrl.ts↓
module rightpane {
'use strict';
export class RightPaneCtrl {
public static $inject = ['$scope', '$http'];
private mModel = new RightPaneTabList;
public constructor(
private $scope: any,
private $http: ng.IHttpService) {
$scope.vm = this;
}
public get tabs(): Tab[] {
return this.mModel.tabs;
}
handleItemClick(aItem: Item): void {
console.log('Item clicked');
this.mModel.addCategory(aItem);
}
handleTabClick(tabIndex: number): void {
console.log('Tab clicked');
this.mModel.tabs.splice(tabIndex, 1);
}
}
}
Directory Structure↓ 目录结构↓
root
|-index.html
|-controllers
|-RightPaneCtrl.ts
2 个解决方案
解决方案1
1 2015-06-28 13:44:03
There are two issues. 有两个问题。 There is a working example , showing the changes below in action (simplified version, just to make it running) 有一个有效的示例 ，显示了下面的更改（简化版本，仅用于使其运行）
Firtly, if we want to use some class.. it already must be loaded, so we must change order of these scripts 首先，如果我们要使用某个类，则必须已经加载它，因此我们必须更改这些脚本的顺序
// here we must make JS aware about our Ctrl
<script src="controllers/RightPaneCtrl.js"></script>
<script src="Application.js"></script>
// here it would be too late
// <script src="controllers/RightPaneCtrl.js"></script>
And also, becase our Controller has module/namespace: 另外，假设我们的控制器具有模块/命名空间：
module rightpane {
export class RightPaneCtrl {
...
We must assign it with its full name: 我们必须为其分配全名：
angular.module('rightpaneMVC')
// instead of this
// .controller('rightPaneCtrl', RightPaneCtrl);
// wee need this
.controller('rightPaneCtrl', rightpane.RightPaneCtrl);
解决方案2
1 已采纳 2015-06-29 09:57:16
So, we had some progress with the other answer . 因此， 其他答案我们取得了一些进展。 But now new issues appeared and OP created this plunker 但是现在出现了新问题，OP创造了这个笨拙的人
http://plnkr.co/edit/WLH1GgLlpE7nek1poWnA?p=preview http://plnkr.co/edit/WLH1GgLlpE7nek1poWnA?p=preview
With this error message: 出现此错误消息：
TypeError: rightpane.RightPaneTabList is not a function at new RightPaneCtrl (RightPaneCtrl.js:14) ...
There is updated and partially working version . 有更新的部分工作版本 。 The problem was ... missing components loaded into the browser... When we create documents like this 问题是...缺少加载到浏览器中的组件...当我们创建这样的文档时
enums/ECategoryType.js models/Item.js models/Tab.js models/RightPaneTabList.js controllers/RightPaneCtrl.js Application.js 枚举/ECategoryType.js模型/Item.js模型/Tab.js模型/RightPaneTabList.js控制器/RightPaneCtrl.js Application.js
We have to append all of them (and in correct order) into the page code: 我们必须将它们全部（以正确的顺序）附加到页面代码中：
<script src="enums/ECategoryType.js"></script>
<script src="models/Item.js"></script>
<script src="models/Tab.js"></script>
<script src="models/RightPaneTabList.js"></script>
<script src="controllers/RightPaneCtrl.js"></script>
<script src="Application.js"></script>
(there are missing images, but app should start) （缺少图片，但应用程序应启动）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.