建站
咨詢
售后
建站咨詢
新聞中心
今天用angular寫table的時候，遇到了一個問題。在ng-repeat中，含有動態(tài)的html，而這些html中含有自定義指令。
10余年的交城網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整交城建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“交城網(wǎng)站設(shè)計”,“交城網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。
因為希望實現(xiàn)一個能夠復(fù)用的table，所以定義了一個指令myStandTable，指令代碼大概如下：
var myCommon = angular.module("myCommon",[]);
myCommon.directive("myStandTable", function () {
return {
restrict: "A",
templateUrl: "app/template/tableTem.html",
transclude: false,
replace: true,
controller: function ($scope,$compile, commonService) {
// do something...
},
link: function (scope, element, attris) {
}
}
});tableTem.html文件代碼如下：
{{item}} {{item[name]}}
控制器文件代碼如下：
var myBasis = angular.module("myBasis",["myCommon"]);
myBasis.controller("myCtrl", function ($scope) {
$scope.tableData = {
multiSelect: false,
pageSize: [10, 20, 50],
thead: ["導(dǎo)入時間", "導(dǎo)入名稱", "結(jié)果", "操作"],
theadName: ["importDate", "name", "result", "oper"]
};
});以上，完成了表格展示數(shù)據(jù)的功能，可是在表格列里面，經(jīng)常有對某行數(shù)據(jù)的操作，而這些操作我們同樣需要以html的形式插入到表格里面，并且這些html中，還會有ng-click等之類的指令，或者是自定義的指令。比如："查看信息"; 這類的html，插入到td中，會以html代碼展示出來，并不會轉(zhuǎn)換成html。
在網(wǎng)上查閱了方法后，找到了一個轉(zhuǎn)html的解決辦法，增加一個過濾器，如下：
myCommon.filter("trusted", function ($sce) {
return function (html) {
if (typeof html == "string") {
return $sce.trustAsHtml(html);
}
return html;
}
});然后修改temp文件中的代碼：
通過以上方法，確實可以將html轉(zhuǎn)成正常的結(jié)果，可是a標(biāo)簽上的ng-click卻沒有效果，查看了問題的關(guān)鍵，是這段html并沒有經(jīng)過angular的編譯，所以ng-click不起作用，需要手動編譯，修改如下：
temp文件代碼修改：
當(dāng)item[name] 等于 "查看信息"時，我們需要通過compileBindExpn指令來手動編譯，再放到div里面去。指令代碼如下：
myCommon.directive("compileBindExpn", function ($compile) {
return function linkFn(scope, elem, attrs) {
scope.$watch("::"+attrs.compileBindExpn, function (html) {
if (html && html.indexOf("<") != -1 && html.indexOf(">") != -1) {
console.log(1);
var expnLinker = $compile(html);
expnLinker(scope, function transclude (clone) {
elem.empty();
elem.append(clone);
});
} else {
elem.empty();
elem.append(html);
}
})
}
});經(jīng)過這種解決方法后，終于能夠正常展示html代碼，且其上的ng-click方法也能正常使用。如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
分享題目：AngularJs中ng-repeat指令中實現(xiàn)含有自定義指令的動態(tài)html的方法
本文路徑：http://www.dlmjj.cn/article/jpdgoi.html
