![](/img/trans.png)
[英]Angular JS - Error: ng:areq Bad Argument Argument 'GameContoller' is not a function, got undefined
[英]Angular JS & TypeScript - Error: ng:areq Bad Argument “Argument 'XXXXXX' is not a function, got undefined”
不斷收到標題中指定的錯誤。
我將模型和控制器分成單獨的文件,分別存儲在模型和控制器目錄下。
當我嘗試將它們鏈接起來時,出現錯誤消息“ ng:areq Bad Argument“參數'rightPaneCtrl'不是函數,未定義 ”。
我的代碼有什么問題?
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↓
module rightpane {
'use strict';
angular.module('rightpaneMVC', ['ui.bootstrap']);
angular.module('rightpaneMVC').controller('rightPaneCtrl', RightPaneCtrl);
}
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);
}
}
}
目錄結構↓
root
|-index.html
|-controllers
|-RightPaneCtrl.ts
有兩個問題。 有一個有效的示例 ,顯示了下面的更改(簡化版本,僅用於使其運行)
首先,如果我們要使用某個類,則必須已經加載它,因此我們必須更改這些腳本的順序
// 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>
另外,假設我們的控制器具有模塊/命名空間:
module rightpane {
export class RightPaneCtrl {
...
我們必須為其分配全名:
angular.module('rightpaneMVC')
// instead of this
// .controller('rightPaneCtrl', RightPaneCtrl);
// wee need this
.controller('rightPaneCtrl', rightpane.RightPaneCtrl);
在這里檢查
因此, 其他答案我們取得了一些進展。 但是現在出現了新問題,OP創造了這個笨拙的人
http://plnkr.co/edit/WLH1GgLlpE7nek1poWnA?p=preview
出現此錯誤消息:
TypeError:rightpane.RightPaneTabList在新的RightPaneCtrl(RightPaneCtrl.js:14)處不是函數...
有更新的部分工作版本 。 問題是...缺少加載到瀏覽器中的組件...當我們創建這樣的文檔時
枚舉/ECategoryType.js模型/Item.js模型/Tab.js模型/RightPaneTabList.js控制器/RightPaneCtrl.js Application.js
我們必須將它們全部(以正確的順序)附加到頁面代碼中:
<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>
(缺少圖片,但應用程序應啟動)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.