Twitter Bootstrap Question posted in

Twitter bootstrap – 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“.

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
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search