angularjs - 如何从 Angular 1x 中的嵌套子组件调用父组件中的函数

Question

我有一个父组件 purchaseComponent 和一个子组件 supplierComponent。当我在完整 View 中加载它时，供应商组件独立工作。此外，我还在 purchaseComponent 内的模态中成功加载了 supplierComponent。

我需要的是，当我单击 supplierComponent 中的 addSupplier 按钮时，它应该完成其当前功能，然后调用 hide 方法 purchaseComponent.

供应商组件

angular.module('TestApp').component('addsupplierComponent', {
    templateUrl: 'addsuppliercomponent/addsupplier.html',
    controller: AddsupplierController,
    controllerAs: 'addsupplierCtrl'
});

function AddsupplierController(){
    var vm = this;
    vm.addSupplier = addSupplier;
    function addSupplier(){
        console.log("supplier component")
    }
}

购买组件

angular.module('TestApp').component('purchaseComponent', {
    templateUrl: 'purchasecomponent/purchase.html',
    controller: PurchaseController,
    controllerAs: 'purchaseCtrl'
});
function PurchaseController(ProductService, LogService){
    var vm = this;
    vm.hideModal = hideModal;
    function hideModal(){
        console.log("Hide Modal")
    }
}

purchase.html

<div class="modal-body">
        <div class="card-content table-responsive">
            <addsupplier-component></addsupplier-component>
        </div>
 </div>

我需要的结果:一旦我从 purchaseComponent 点击 addSupplier，输出应该是

Supplier component
Hide Modal

Answer 1

will [child]Component work independently without passing any parameter? coz I want this to work as an independent component too

要使子组件能够独立运行，请使用表达式 &绑定(bind)可选 &?并在调用前检查:

子组件

app.component('childComponent', {
    templateUrl: 'component/child.html',
    controller: ChildController,
    controllerAs: 'childCtrl',
    bindings: {
        onDone: '&?'
    }
});

function ChildController(){
    var vm = this;
    vm.done = function done(){
        console.log("child function")
        vm.onDone && vm.onDone();
    }
}

父组件

app.component('parentComponent', {
    templateUrl: 'component/parent.html',
    controller: ParentController,
    controllerAs: 'parentCtrl'
});
function ParentController(ProductService, LogService){
    var vm = this;
    vm.hideModal = hideModal;
    function hideModal(){
        console.log("Hide Modal")
    }
}

parent.html

<div class="modal-body">
    <div class="card-content table-responsive">
        <child-component on-done="parentCtrl.hideModal()">
        </child-component>
    </div>
</div>

通过使用可选表达式 &?绑定(bind)，子组件可以独立运行:

<child-component></child-component>

来自文档:

All 4 kinds of bindings (@, =, <, and &) can be made optional by adding ? to the expression. The marker must come after the mode and before the attribute name. This is useful to refine the interface directives provide.

— AngularJS Comprehensive Directive API Reference - scope