AngularJS controller function not recognized

Question

I have an AngularJS project with the structure shown in the first picture. I use custom tags defined as angularJS components.

My main layout uses the custom tag by displaying it in a tab. The code snippet from my main-layout component is the following:

<uib-tabset type="pills" active="$ctrl.getActiveTab()">

    <uib-tab class="mormontTab" heading="Tab0" ng-show="$ctrl.drFormActive() && $ctrl.daFormInactive()" ng-click="$ctrl.setActiveTab(0)">
        <drform-tag></drform-tag>
    </uib-tab>

    <uib-tab class="mormontTab" heading="Tab1" ng-show="$ctrl.daFormActive() && $ctrl.drFormInactive()" ng-click="$ctrl.setActiveTab(1)">
        <daform-tag></daform-tag>
    </uib-tab>

    <uib-tab class="mormontTab" heading="Tab2" ng-click="$ctrl.setActiveTab(2)">
        <mydocs-tag></mydocs-tag>
    </uib-tab>

    <uib-tab class="mormontTab" heading="Tab3" ng-click="$ctrl.setActiveTab(3)">
    <fluxdocs-tag></fluxdocs-tag>
    </uib-tab>

    <uib-tab class="mormontTab" heading="Tab4" ng-click="$ctrl.setActiveTab(4)">Tab  content
    </uib-tab>

    <uib-tab class="mormontTab" heading="Tab5" ng-click="$ctrl.setActiveTab(5)">Tab  content
    </uib-tab>
</uib-tabset>

My custom tag is a form with many user inputs (associated with ng-model parameters).

The custom tag component is defined in the daform-tag.js file as folows:

angular.module('EasyDocsUBBApp')
    .component('daformTag', {
        templateUrl: 'da-doc/daform-tag.html',
        controller: function (AppService) {
        $ctrl = this;

        $ctrl.expenses = [];

        $ctrl.handleForm = function () {
            AppService.setActiveTab(2);
            AppService.handleDAForm("D");
        };

        $ctrl.handleForm = function () {
            AppService.setActiveTab(2);
            AppService.handleDAForm("D");
        };

        $ctrl.getSumaCercetareSolicitata = function () {
            var suma = 0;
            if ($ctrl.sumaDIFN != undefined)
                suma += $ctrl.sumaDIFN;
            if ($ctrl.sumaDIFI != undefined)
                suma += $ctrl.sumaDIFI;
            if ($ctrl.sumaDICTA != undefined)
                suma += $ctrl.sumaDICTA;
            return suma;
        };

        $ctrl.getSumaCercetareAprobata = function () {
            var suma = 0;
            if ($ctrl.sumaDIFNAC != undefined)
                suma += $ctrl.sumaDIFNAC;
            if ($ctrl.sumaDIFIAC != undefined)
                suma += $ctrl.sumaDIFIAC;
            if ($ctrl.sumaDICTAAC != undefined)
                suma += $ctrl.sumaDICTAAC;
            return suma;
        };

        $ctrl.getSumaCercetare = function () {
            return (ctrl.getSumaCercetareSolicitata() + $ctrl.getSumaCercetareAprobata());
        };


        $ctrl.getSumaAlteleSolicitata = function () {
            var suma = 0;
            if ($ctrl.sumaDIFS != undefined)
                suma += $ctrl.sumaDIFS;
            if ($ctrl.sumaDIFE != undefined)
                suma += $ctrl.sumaDIFE;
            if ($ctrl.sumaDITA != undefined)
                suma += $ctrl.sumaDITA;
            return suma;
        };

        $ctrl.getSumaAlteleAprobata = function () {
            var suma = 0;
            if ($ctrl.sumaDIFSAC != undefined)
                suma += $ctrl.sumaDIFSAC;
            if ($ctrl.sumaDIFEAC != undefined)
                suma += $ctrl.sumaDIFEAC;
            if ($ctrl.sumaDITAAC != undefined)
                suma += $ctrl.sumaDITAAC;
            return suma;
        };

        $ctrl.getSumaAltele = function () {
            return ($ctrl.getSumaAlteleSolicitata() + $ctrl.getSumaAlteleAprobata());
        };


        $ctrl.getSumaTotalaSolicitata = function () {
            var suma = 0;
            if ($ctrl.sumaS != undefined)
                suma += $ctrl.sumaS;
            if ($ctrl.sumaVP != undefined)
                suma += $ctrl.sumaVP;
            return ($ctrl.getSumaCercetareSolicitata() + $ctrl.getSumaAlteleSolicitata() + suma);
        };

        $ctrl.getSumaTotalaAprobata = function () {
            var suma = 0;
            if ($ctrl.sumaSAC != undefined)
                suma += $ctrl.sumaSAC;
            if ($ctrl.sumaVPAC != undefined)
                suma += $ctrl.sumaVPAC;
            return ($ctrl.getSumaCercetareAprobata() + $ctrl.getSumaAlteleAprobata() + suma);
        };
$ctrl.submitForm = function () {
            var rN = {
                      //Json with user inputs
                     };  
            AppService.setActiveTab(0);
            AppService.createDADoc(rN);
        };

    }
});

Mainly, the purpose of the functions above is to take user inputs (numbers) and to display inside a disabled input, the sum of the numbers entered in multiple inputs by the user. Consequently, the disabled inputs that display the sum of the numbers entered by the user refer the functions above using the 'value' attribute, inside my custom tag. Such an example is as follows:

<label>Sum</label>
<input type="number" class="form-control mormontInput" value="{{$ctrl.getSumaCercetareAprobata()}}" placeholder="0" disabled>

My issue is that, when the component is loaded I get in console errors like the following:

As I am relatively new to AngularJS, I am probably doing something wrong. Could someone help me with this?

I should add that the uib-tab that contains the custom tag in question is shown or not-shown using ng-show attribute.

Why does the error say 'function name' is not a function in controller.$ctrl. ... ?

UPDATE: When I use my custom component outside the uib-tabset, it works just fine. Only when used inside the uib-tabset leads to the described issues.

Thank you a lot.

have you tried maybe with ng-value="$ctrl.getSumaCercetareAprobata()" or ng-bind="$ctrl.getSumaCercetareAprobata()" — federico scamuzzi
– federico scamuzzi, Commented Jan 12, 2017 at 15:43
I tried it but it's weird: just after the first livereload, it worked but after restarting the app the same issues appeared. — Lucian Bredean
– Lucian Bredean, Commented Jan 12, 2017 at 16:02

Francesca · Accepted Answer · 2017-01-12 17:41:21Z

0

Here you put ctrl instead of $ctrl

 $ctrl.getSumaCercetare = function () {
            return (ctrl.getSumaCercetareSolicitata() + $ctrl.getSumaCercetareAprobata());
        };

but I don't think that this can cause your issue

answered Jan 12, 2017 at 17:41

Francesca

2482 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lucian Bredean Over a year ago

Yes, indeed, the '$' is missing. But I think that the problem is somehow related with the scope ( I am using that uib-tabset that may have its own scope and controller) ... however, I didn't manage to solve it yet.

Chas Brown · Accepted Answer · 2017-01-12 19:40:51Z

0

Here's my shot in the dark: instead of '$ctrl = this;' at the very minimum you need to say 'var $ctrl = this;'.

And really, you shouldn't use '$ctrl' inside your controller (that's just for use in the the template); you should use something like 'var vm = this;' or just use 'this'.

answered Jan 12, 2017 at 19:40

Chas Brown

3961 silver badge10 bronze badges

Collectives™ on Stack Overflow

AngularJS controller function not recognized

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related