【发布时间】:2017-03-08 23:34:15
【问题描述】:
新的 Angular 并出现此错误。
未捕获的类型错误:无法使用“in”运算符在子包中搜索“$ctrl”
我有一个父组件和一个子组件,我在父组件上有这个函数,用于过滤一些 JSON 以获得特定值。我被困在子控制器中要做什么,所以我可以调用这个父函数,甚至还没有开始弄清楚我需要做什么才能从子模板调用它。这是我所拥有的。
var myApp = angular.module('subPackages', ['ngMaterial', 'ngMessages']);
(function (app) {
'use strict';
app.component('appComponent', {
templateUrl: '../subpackages/templates/app-template.html',
controller: subAppController
});
app.component('perfList', {
templateUrl: '../subpackages/templates/perf-list.templateV3.html',
controller: PerfListController,
bindings: {
contentJson: '<',
getGlobalContent: '&'
},
});
})(myApp);
父母
function subAppController() {
this.currentStep = 1;
this.contentJson =
{
"id": "1",
"cart_method": "cartAdd",
"package": "69",
"page_title": "Subscriptions",
"page_header": "Choose a minimum of 3 performances\/events for guaranteed subscriber prices throughout the season.<\/br>\r\nStep 1: Choose your performances and price sections. Step 2: Indicate your seating preference.",
"add_btn_txt": "Add"
}
this.globalContentJson = [
{ "id": "1", "module": "subpackage", "item": "mobileNavText", "content": "Month Navigation" },
{ "id": "2", "module": "subpackage", "item": "allPerfText", "content": "All Performances" },
{ "id": "3", "module": "subpackage", "item": "pageTopText", "content": "BACK TO TOP" },
{ "id": "4", "module": "subpackage", "item": "cartSummaryText", "content": "Your Selections" },
{ "id": "5", "module": "subpackage", "item": "cartSummaryRemoveText", "content": "Delete" },
{ "id": "6", "module": "subpackage", "item": "continueBtnText", "content": "Continue" }
];
//Called from the template to get global content.
this.getGlobalContent = function (module, item) {
var globalContent = new contentProvider(this.globalContentJson);
var result = globalContent.get(module, item);
return result;
}
}
父模板
<div class="container-fluid">
<div class="cs-app-left row">
<div class="pull-left">
<label>{{$ctrl.contentJson.page_title}}</label>
</div>
<div class="cs-app-right pull-right">
<cart-summary
content-json="$ctrl.contentJson">
</cart-summary>
</div>
</div>
<div class="cs-app-main row">
<div>
<perf-list
ng-if="$ctrl.currentStep == 1"
content-json="$ctrl.contentJson"
get-global-content="$ctrl.getGlobalContent(module,item)"
>
</perf-list>
</div>
</div>
</div>
子控制器
function PerfListController() {
this.$onInit = function () {
this.content = this.contentJson;
this.globalContent = this.getGlobalContent;
var cartAddEl = angular.element(document.querySelector('.cs-cartadd'));
var redirectEl = angular.element(document.querySelector('.cs-redirect'));
if (this.content.cart_method == "cartAdd") {
cartAddEl.removeClass('hidden');
redirectEl.addClass('hidden');
} else {
redirectEl.removeClass('hidden');
cartAddEl.addClass('hidden');
}
this.cart_method = this.content.cart_method;
this.test = this.globalContent("subpackage", "mobileNavText");
};
//Other Code Here
}
【问题讨论】:
-
有点迷茫,如果只是在init方法中调用,为什么还需要子控制器中的函数呢?为什么不直接将数据传递给它?
-
抱歉,这里没有关注你。您是说不要将函数降级到子组件中,而是从子模板中的父级调用函数?再次,我很抱歉。这方面很新。
-
我想知道您是否需要父控制器和子控制器中的功能。您是否对父子函数中的数据进行了处理?
-
不,我不是。只是两个模板使用的静态数据。没有更新数据。数据是 this.globalContentJson。我只需要能够将其过滤到特定值。例如,{{ 我需要 module = subpackage 和 item = mobileNavText }} 的内容值
-
避免在控制器中进行 DOM 操作。使用ng-class directive 动态设置类。还可以考虑使用ng-hide directive 隐藏元素。
标签: angularjs