無法識別AngularJS控制器功能

Question

我有一個AngularJS項目，其結構如第一幅圖所示。 我使用定義為angularJS組件的自定義標簽。

我的主布局通過在標簽中顯示自定義標簽來使用它。 我的主布局組件中的代碼段如下：

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

我的自定義標簽是具有許多用戶輸入的表單（與ng-model參數關聯）。

自定義標簽組件在daform-tag.js文件中定義如下：

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

    }
});

主要是，上述功能的目的是獲取用戶輸入（數字）並在禁用的輸入中顯示用戶在多個輸入中輸入的數字總和。 因此，顯示用戶輸入的數字總和的禁用輸入將在我的自定義標簽內使用“值”屬性引用上述功能。 這樣的例子如下：

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

我的問題是，加載組件時，出現如下控制台錯誤：

由於我是AngularJS的新手，所以我可能做錯了什么。 有人可以幫我嗎？

我應該補充一點，使用ng-show屬性顯示或不顯示包含有問題的自定義標簽的uib選項卡。

為什么錯誤顯示“函數名稱”不是控制器 。$ ctrl中的函數。 ...？

更新：當我在uib-tabset之外使用我的自定義組件時，它工作正常。 僅當在uib選項卡中使用時，才導致所描述的問題。

非常感謝。

Answer 1

在這里，您輸入ctrl而不是$ ctrl

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

但我認為這不會引起您的問題

Answer 2

這是我在黑暗中的鏡頭：而不是'$ ctrl = this;' 至少您需要說“ var $ ctrl = this;”。

實際上，您不應該在控制器內使用“ $ ctrl”（僅用於模板）。 您應該使用類似“ var vm = this;”的名稱 或僅使用“ this”。