【问题标题】:Angular 1.6 typeError with bindingAngular 1.6 typeError 与绑定
【发布时间】: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


【解决方案1】:

解决了。在子模板中调用了错误的函数。最终使用

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

感谢 georgeawg 关于课程的建议,我会修改它们。

【讨论】:

    猜你喜欢
    • 2017-05-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-11-02
    • 2021-06-21
    相关资源
    最近更新 更多