Question

viewBannerCtrl是我使用＆＃34; customTable＆＃34;的控制器。指示在这里，我无法访问＆＃34; VBC.bannerAlert（）＆＃34;指令的功能并且我将代码附加到指令但不能使用追加标记

访问控制器函数

＆＃13;

 

.controller('viewBannerCtrl',function(){
    vbc.bannerAlert = function(){
      alert('success called in inside directive.....Hurry!!!!!!!!!!!!!!!!!!');
    };

});
.directive('customTable', function customTable($compile) {
        return {
            restrict: 'EA',
            templateUrl: 'app/admin/modules/common/views/custom_table.html',
            scope: {
                data: '=data',
                dataLength: '=datalength',
                filterDataArray: '=filterData',
                imageData: '=imageData'
            },
            controller: customTableCtrl,
            link:function(scope,element,attr){
var el =   angular.element(document.getElementById('dyanamicActions'));

                el.append('<button  class="btn btn-danger btn-rounded btn-ef btn-ef-5 btn-ef-5b" ng-click="VBC.bannerAlert()"><i class="fa fa-trash"></i> <span>Deletess</span></button>');
                $compile(el)(scope);
            },
            controllerAs: 'CTC',
            bindToController: true
        };
    });
    function customTableCtrl(MainService) {
    var ctc = this;
    };
}

＆＃13;

<div custom-table data="VBC.getBannerlistData"  datalength="VBC.totalItems"
                         table-headers="VBC.tableInit" image-data="'image'"
                         table-actions="VBC.editData" delete-model="VBC.openBannerDeleteModal">

                        
                    </div>

＆＃13;

Answer 1

您当前的指令已使用scope: { ... }等隔离范围实现。因此，指令不具备外部范围方法（当范围被隔离时，没有遵循原型继承）。

您必须使用bannerAlert将&函数表达式从其隔离范围传递给指令。这样该函数将在指令范围内可用。

要将该函数传递给指令，您必须在指令元素上写入属性bannerAlert="bannerAlert()"。就像我在下面显示的那样。

<强>标记

<div custom-table data="VBC.getBannerlistData"  
  datalength="VBC.totalItems"
  table-headers="VBC.tableInit" 
  image-data="'image'"
  table-actions="VBC.editData" 
  delete-model="VBC.openBannerDeleteModal"
  bannerAlert="bannerAlert()">
</div>

<强>代码

scope: {
    data: '=data',
    dataLength: '=datalength',
    filterDataArray: '=filterData',
    imageData: '=imageData',
    bannerAlert: '&bannerAlert' //<--added expression binding here
},

如何在将html追加到指令后调用函数

1 个答案: