无法识别AngularJS控制器功能 [英] AngularJS controller function not recognized
问题描述
我有一个AngularJS项目，其结构如第一幅图所示.我使用定义为angularJS组件的自定义标签.
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>
我的自定义标签是具有许多用户输入(与ng-model参数相关联)的表单.
My custom tag is a form with many user inputs (associated with ng-model parameters).
自定义标签组件在daform-tag.js文件中定义为:
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:
由于我是AngularJS的新手，所以我可能做错了什么.有人可以帮我吗?
As I am relatively new to AngularJS, I am probably doing something wrong. Could someone help me with this?
我应该补充一点，使用ng-show属性显示或不显示包含有问题的自定义标签的uib标签.
I should add that the uib-tab that contains the custom tag in question is shown or not-shown using ng-show attribute.
为什么错误提示功能名称"不是 controller .$ ctrl中的功能....?
Why does the error say 'function name' is not a function in controller.$ctrl. ... ?
更新:当我在uib标签集之外使用我的自定义组件时，它工作正常.仅当在uib选项卡中使用时，才导致所描述的问题.
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.
非常感谢您.
推荐答案
这是我在黑暗中的镜头:而不是'$ ctrl = this;'至少您需要说"var $ ctrl = this;".
Here's my shot in the dark: instead of '$ctrl = this;' at the very minimum you need to say 'var $ctrl = this;'.
实际上，您不应该在控制器内使用"$ ctrl"(仅用于模板)；您应该使用类似"var vm = this;"的名称或仅使用"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'.
这篇关于无法识别AngularJS控制器功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
