Angular JS & TypeScript - Error: ng:areq Bad Argument “Argument 'XXXXXX' is not a function, got undefined”
Question
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 ".
What's wrong with my code?
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);
}
}
}
Directory Structure↓
root
|-index.html
|-controllers
|-RightPaneCtrl.ts
2 answers
solution1
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);
Check it here
solution2
1 ACCPTED 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
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
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)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.