代码之家 › 专栏 › 技术社区 › Wasimakram Mulla

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

angularjs-components angularjs

3

Wasimakram Mulla · 技术社区 · 7 年前

我有一个家长说 purchaseComponent 还有一个子组件,比如说 supplierComponent .当我在全视图中加载时,供应商组件独立工作。此外,我正在成功加载 供应商组件 采购组件 .

addSupplier 按钮位于它应该完成当前的功能,然后调用 hide 方法来自 采购组件 .

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")
    }
}

购买.html

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

我需要的结果:单击后 添加供应商 从…起 ,输出应为

Supplier component
Hide Modal

2 回复 | 直到 7 年前

1

6

georgeawg 7 年前

将 [child]Component 在不传递任何参数的情况下独立工作?因为我希望它也能作为一个独立的组件工作

& 绑定可选 &? 并在调用前检查:

子组件

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")
    }
}

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

&? 绑定时,子组件可以独立操作:

<child-component></child-component>

所有4种绑定( @ , = < 和 & ? 到表达式。标记必须位于模式之后、属性名称之前。这有助于完善接口指令提供的功能。

— AngularJS Comprehensive Directive API Reference - scope

2

1

cstuncsik 7 年前

检查文档 here

添加供应商组件

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

function AddsupplierController(){
   var vm = this;
   vm.addSupplier = addSupplier;
   function addSupplier(){
      vm.hideModal()
  }
}

购买.html

<div class="modal-body">
    <div class="card-content table-responsive">
        <addsupplier-component hide-modal="purchaseCtrl.hideModal()"></addsupplier-component>
    </div>
</div>