在我的父组件的模板中,有一个嵌套组件.
<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 });