How To Call Function After Append Html To The Directive

viewBannerCtrl is the controller in that i'm using 'customTable' directive Here i'm not able to access 'VBC.bannerAlert()' function from the directive and i appended the code to

Solution 1:

You current directive has implemented using isolated scope like scope: { ... }. So directive don't have outer scope methods are available in it(didn't follow prototypal inheritance when scope are isolated).

You have to pass bannerAlert function expression to directive from its isolated scope using &. So that that function will get available inside directive scope.

For passing that function to directive you have to write attribute bannerAlert="bannerAlert()" on directive element. Like I've shown below.

Markup

<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>

Code

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