堆栈内存溢出
  繁体   English   中英

Angular JS和TypeScript-错误：ng：areq错误参数“参数'XXXXXX'不是函数，未定义”

[英]Angular JS & TypeScript - Error: ng:areq Bad Argument “Argument 'XXXXXX' is not a function, got undefined”

 原文  2015-06-27 13:03:41  9   2    javascript/ angularjs/ typescript

问题描述

不断收到标题中指定的错误。

我将模型和控制器分成单独的文件，分别存储在模型和控制器目录下。

当我尝试将它们链接起来时，出现错误消息“ 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

2 个解决方案

解决方案1
 1  2015-06-28 13:44:03

有两个问题。 有一个有效的示例 ，显示了下面的更改（简化版本，仅用于使其运行）

首先，如果我们要使用某个类，则必须已经加载它，因此我们必须更改这些脚本的顺序 

// 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);

在这里检查

解决方案2
 1 已采纳  2015-06-29 09:57:16

因此， 其他答案我们取得了一些进展。 但是现在出现了新问题，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.

相关问题 Angular JS-错误：ng：areq错误的参数参数&#39;GameContoller&#39;不是函数，未定义 错误：ng：areq错误参数：参数&#39;registerController&#39;不是函数，未定义 带有Typescript错误的Angularjs错误：[ng：areq]参数&#39;IndexViewModel&#39;不是一个函数，未定义 错误：[ng：areq]参数不是函数，未定义 Angular“angular.js：14110错误：[ng：areq]参数&#39;fn&#39;不是函数，未定义”控制器实例化异常 angular.js：10126错误：[ng：areq]参数[…]不是函数，未定义 angular.js：13550错误：[ng：areq]参数&#39;popCntrl&#39;不是一个函数，未定义 angular.js：13708错误：[ng：areq]参数&#39;homeController&#39;不是函数，未定义 Angular.js：13424 错误：[ng:areq] 参数“enfermerosController”不是函数，未定义 错误：ng：areq错误的参数参数&#39;ClientCtrl&#39;不是函数，未定义。
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM