Question

新增角度并获得此错误。

未捕获TypeError：无法使用'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
}

Answer 1

解决了。在子模板中调用函数是错误的。结束使用

<span>
   {{$ctrl.globalContent({module: "subpackage", item:"mobileNavText"})}}
</span>

感谢georgeawg对类的建议，我将修改它们。

带有绑定的Angular 1.6 typeError

1 个答案: