Question

我有一个AngularJS项目，其结构如第一张图所示。我使用定义为angularJS组件的自定义标签。

我的主要布局通过在选项卡中显示自定义标记来使用自定义标记。我的main-layout组件的代码片段如下：

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

    }
});

主要地，上述功能的目的是获取用户输入（数字）并在禁用的输入内显示用户在多个输入中输入的数字的总和。因此，显示用户输入的数字总和的禁用输入使用＆＃39;值＆＃39;来指示上述功能。属性，在我的自定义标记内。这样的例子如下：

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

我的问题是，当加载组件时，我会遇到如下控制台错误：

由于我对AngularJS相对较新，我可能做错了。有人可以帮我这个吗？

我应该添加使用ng-show属性显示或不显示包含相关自定义标记的uib-tab。

为什么错误会显示＆＃39;功能名称＆＃39;不是控制器中的函数。$ ctrl。 ......？

更新：当我在uib-tabset外部使用我的自定义组件时，它可以正常工作。只有在uib-tabset中使用时才会导致所描述的问题。

非常感谢你。

Answer 1

这里你把ctrl而不是$ ctrl

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

但我认为这不会导致您的问题

Answer 2

这是我在黑暗中的镜头：而不是'$ ctrl = this;'至少你需要说'var $ ctrl = this;'。

实际上，你不应该在你的控制器中使用'$ ctrl'（这只是在模板中使用）;你应该使用类似'var vm = this;'的东西或者只是使用'this'。

AngularJS控制器功能无法识别

2 个答案: