如何追加HTML的指令后，调用函数 [英] how to call function after append html to the directive

问题描述

viewBannerCtrl是，我使用customTable指令控制器
在这里，我不能够从该指令访问VBC.bannerAlert（）函数
我附加了code到指令，但无法访问与追加标签控制器功能

\r

\r

\r
\r
.controller（'viewBannerCtrl'，函数（）{\r
    vbc.bannerAlert =功能（）{\r
      警报（'成功称为内部指令.....快点!!!!!!!!!!!!!!!!!!'）;\r
    };\r
\r
}）;\r
.directive（'customTable'，功能customTable（$编译）{\r
        返回{\r
            限制：EA，\r
            templateUrl：应用程序/管理/模块/通用/视图/ custom_table.html'，\r
            范围： {\r
                数据：'=数据'，\r
                DATALENGTH：'= DATALENGTH'，\r
                filterDataArray：'=筛选数据'，\r
                为imageData：'=为imageData\r
            }，\r
            控制器：customTableCtrl，\r
            链接：功能（范围，元素，属性）{\r
VAR EL = angular.element（的document.getElementById（'dyanamicActions'））;\r
\r
                el.append（'＆LT;按钮类=BTN BTN-危险BTN圆润BTN-EF BTN-EF-5 BTN-EF-5BNG点击=VBC.bannerAlert（）＆GT;＆LT; I级= 发FA-垃圾＆GT;＆LT; / I＆GT;＆LT;跨度＆GT; Deletess＆LT; / SPAN＆GT;＆LT; /按钮＆GT;'）;\r
                $编译（EL）（范围）;\r
            }，\r
            controllerAs：CTC，\r
            bindToController：真\r
        };\r
    }）;\r
    功能customTableCtrl（MainService）{\r
    VAR CTC =这一点;\r
    };\r
}

\r

＆LT;格的自定义表数据=VBC.getBannerlistData数据长度=VBC .totalItems\r
                         表头=VBC.tableInit图像数据='形象'\r
                         表行动=VBC.editData删除模型=VBC.openBannerDeleteModal＆GT;\r
\r
                        \r
                    ＆LT; / DIV＆GT;

\r

\r

\r

解决方案

您当前的指令已经使用隔离范围，比如实施范围：{...} 。所以指令没有外部范围的方法是在使用它（没有按照原型继承范围时被隔离）。

您必须通过 bannerAlert 函数前pression使用＆放从孤立的范围指令; 。这样的功能会得到可用的内部指令范围。

针对通过该功能来指导你必须写属性 bannerAlert =bannerAlert（）指令元素。就像我如下图所示。

标记

 ＆LT;格的自定义表数据=VBC.getBannerlistData
  数据长度=VBC.totalItems
  表头=VBC.tableInit
  图像数据='形象'
  表行动=VBC.editData
  删除模型=VBC.openBannerDeleteModal
  bannerAlert =bannerAlert（）＆GT;
＆LT; / DIV＆GT;
 

code

 范围：{
    数据：'=数据'，
    DATALENGTH：'= DATALENGTH'，
    filterDataArray：'=筛选数据'，
    为imageData：'=为imageData'，
    bannerAlert：'和; bannerAlert'//＆LT;  - 前添加pression这里结合
}，
 

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 directive but not able to access controller functions with append tag

 

.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;
    };
}

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

解决方案

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

这篇关于如何追加HTML的指令后，调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！