angularjs – 从Angular 1.5中的父组件调用子组件函数

发布时间：2020-12-17 06:49:20 所属栏目：安全来源：网络整理

导读：在我的父组件的模板中,有一个嵌套组件. div class="inner" ng-show="!vm.loading" div class="info-panel" h3 id="basePrice"Current Cost/h3 p small a href role="button" data-toggle="modal" ng-click="vm.openCostsModal()"See Details/a /small /p /di

在我的父组件的模板中,有一个嵌套组件.

<div class="inner" ng-show="!vm.loading">
    <div class="info-panel">
        <h3 id="basePrice">Current Cost</h3>
        <p>
            <small>
                <a href role="button" data-toggle="modal" ng-click="vm.openCostsModal()">See Details</a>
            </small>
        </p>
    </div>
    ......
    ......
    <pricingcalculation></pricingcalculation>

这< pricingcalculation>< / pricingcalculation>是嵌套组件.
它的定义如下：

(function () {
    "use strict";
    angular.module("app")
        .component("pricingcalculation",{
            transclude: true,templateUrl: "/static/angtemplates/pricing-calculation.html",controllerAs: "vm",controller: ["$rootRouter",function ($rootRouter) {
                var vm = this;
                vm.openCostsModal = function () {
                    vm.costItems = [];
                    vm.projectedCostItems = [];
                    vm.totalOfCostItems = 0;
                    .....
                    .....

因此,在“查看详细信息”按钮上单击在父模板上定义的按钮

我希望调用子组件的函数openCostsModal().

怎么做？

解决方法

您可以在父级中使用$broadcast来广播事件,并在您的孩子上使用$on来收听它.

像这样：

在父母：

$scope.$broadcast("someEvent");

在孩子：

$scope.$on("someEvent",function(){
  //do stuff here
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!