角JS＆安培;打字稿 - 错误：NG：AREQ糟糕论点＆QUOT;参数“XXXXXX”是不是一个函数，得到了不确定＆QUOT; [英] Angular JS & TypeScript - Error: ng:areq Bad Argument "Argument 'XXXXXX' is not a function, got undefined"
本文介绍了角JS＆安培;打字稿 - 错误：NG：AREQ糟糕论点＆QUOT;参数“XXXXXX”是不是一个函数，得到了不确定＆QUOT;的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请让在标题中指定的错误。
我分裂模型和控制器到下分别为模型和控制器目录存储单独的文件。
当我试图把它们连接起来，我得到了一个错误说。纳克：AREQ糟糕论点参数rightPaneCtrl不是一个函数，得到了不确定
这有什么错我的code？
index.html的↓
＆LT; HTML NG-应用=rightpaneMVC数据框架=打字稿＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8/＆GT;
＆LT;链接rel =stylesheet属性HREF =// code.jquery.com / UI / 1.9.2 /主题/基/ jQuery的-ui.css＆GT;
＆LT;！ - ＆LT;脚本的src =// ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js\"></script>
＆LT;脚本的src =// code.jquery.com / UI / 1.9.2 / jQuery的-ui.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =// netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js\"></script>-->
＆LT;风格＆GT;
.item_list {
显示：弯曲;
柔性方向：排;
填充左：0;
} .item_list＆GT;李{
列表样式类型：无;
光标：指针;
边框：1px的纯黑色;
填充：0.3rem;
宽度：100像素;
保证金右：0.2rem;
}
＆LT; /风格＆GT; ＆LT;链接rel =stylesheet属性HREF =// netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css\">
＆LT; /头＆GT;
＆LT;身体GT; ＆LT; DIV ID =标签类NG控制器=rightPaneCtrl＆GT;
＆LT;！ - ＆LT; UL＆GT;
＆LT;李NG重复=选项卡vm.tabs轨道由$指数NG点击=vm.handleTabClick（制表，$指数）＆GT;
＆所述; A HREF =＃{{tab.tabID}}＆GT; {{tab.name}} {{tab.tabID}}＆下; / A＆GT;
＆LT;跨度NG：类={真：UI图标UI图标的圆紧密UI关闭的选项卡，假：''} [！$指数= 0]＆GT;＆LT; / SPAN＆GT;
＆LT; /李＆GT;
＆所述; / UL＆GT - →;
＆LT;小时/＆GT;
＆LT;标签集NG-的init =startActive =真正的＆GT;
＆LT;标签NG重复=在vm.tabs标签来跟踪由$指数激活=startActive＆GT;
＆LT;制表标题NG-开关=tab.isClosable＆GT;
＆LT; DIV NG-开关时=真＆gt;
{{tab.name}}＆LT;一个NG点击=vm.handleTabClick（$指数）的href =''＆GT;＆LT; I类=图标删除＆GT;＆LT; / I＆GT;＆LT; / A＆GT ;
＆LT; / DIV＆GT;
＆LT; DIV NG-开关时=假＆gt;
{{tab.name}}
＆LT; / DIV＆GT;
＆LT; /制表标题＆GT;
＆LT; UL类=item_listNG-开关=tab.categoryTypeString＆GT; ＆LT;李NG-开关时=DAING重复=，在tab.items项目NG点击=vm.handleItemClick（项目）＆GT;
＆LT; IMG NG-SRC ={{item.thumbnailPath}}＆GT;＆LT; BR /＆GT;
＆LT; p ALIGN =中心＆GT; {{item.categoryName}}＆LT; / P＆GT;
＆LT; /李＆GT;
＆LT;李NG-开关时=楚NG重复=，在tab.items项目NG点击=vm.handleItemClick（项目）＆GT;
＆LT; IMG NG-SRC ={{item.thumbnailPath}}＆GT;＆LT; BR /＆GT;
＆LT; p ALIGN =中心＆GT; {{item.categoryName}}＆LT; / P＆GT;
＆LT; /李＆GT;
＆LT;李NG开关默认NG重复=项tab.items＆GT;
＆LT; IMG NG-SRC ={{item.thumbnailPath}}＆GT;＆LT; BR /＆GT;
＆LT; p ALIGN =中心＆GT; {{item.categoryName}}＆LT; / P＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /标签＆gt;
＆LT; /标签集＆GT;
＆LT;！ - ＆LT; DIV NG重复=选项卡vm.tabs轨道由$指数ID ={{tab.tabID}}＆GT; ＆LT; UL类=item_listNG-开关=tab.categoryTypeString＆GT;
＆LT;李NG-开关时=DAING重复=，在tab.items项目NG点击=vm.handleItemClick（项目）＆GT; {{item.categoryName}}＆LT; /李＆GT;
＆LT;李NG-开关时=楚NG重复=，在tab.items项目NG点击=vm.handleItemClick（项目）＆GT; {{item.categoryName}}＆LT; /李＆GT;
＆LT;李NG开关默认NG重复=项tab.items＆GT; {{item.categoryName}}＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT; - ＆GT;
＆LT; / DIV＆GT; ＆LT;脚本的src =// code.angularjs.org / 1.4.1 / angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本src=\"//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.4.0/ui-bootstrap-tpls.min.js\"></script>
＆所述; SCRIPT SRC =的application.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =控制器/ RightPaneCtrl.js＆GT;＆下; /脚本＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
Application.ts↓
模块rightpane { 使用严格的; angular.module（'rightpaneMVC'，['ui.bootstrap']）;
angular.module（'rightpaneMVC'）控制器（'rightPaneCtrl'，RightPaneCtrl）。
}
RightPaneCtrl.ts↓
模块rightpane { 使用严格的; 出口类RightPaneCtrl { 公共静态$注射='$范围，$ HTTP']; 私人模型探讨=新RightPaneTabList; 公共构造（ 私人$范围：任何，
私人$ HTTP：ng.IHttpService）{ $ scope.vm =这一点;
} 公共的get标签（）选项卡[] {
返回this.mModel.tabs;
} handleItemClick（aItem：项目）：无效{
的console.log（'项目点击'）;
this.mModel.addCategory（aItem）;
} handleTabClick（的tabIndex：数）：无效{
的console.log（'标签点击'）;
this.mModel.tabs.splice（的tabIndex，1）;
}
}
}
目录结构↓
根
| -index.html
| -controllers
| -RightPaneCtrl.ts
解决方案
所以，我们曾与对方的回答。但现在新的问题出现了，OP创造了这个plunker
http://plnkr.co/edit/WLH1GgLlpE7nek1poWnA?p=$p$ PVIEW
通过此错误消息：
类型错误：rightpane.RightPaneTabList不是一个函数
在新RightPaneCtrl（RightPaneCtrl.js：14）...有被更新，部分工作版本。问题是...缺少的组件加载到浏览器...当我们创建一个这样的文件
枚举/ ECategoryType.js
车型/ Item.js
车型/ Tab.js
车型/ RightPaneTabList.js
控制器/ RightPaneCtrl.js
的application.js我们必须对所有这些（以及正确的顺序）追加到页面code：
＆LT;脚本SRC =枚举/ ECategoryType.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =模型/ Item.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =模型/ Tab.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =模型/ RightPaneTabList.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =控制器/ RightPaneCtrl.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =的application.js＆GT;＆下; /脚本＆GT;的（有图像丢失，但应用程序应该开始）的
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
解决方案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)
这篇关于角JS＆安培;打字稿 - 错误：NG：AREQ糟糕论点＆QUOT;参数“XXXXXX”是不是一个函数，得到了不确定＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
