我正在使用一些操作创建一个DataGrid模块,但是ng-click在添加$ compile语句后不会触发事件
模组
angular.module('powerGridAngular').service("powerGridContainer", function ($http, powerGridMethods) {
this.buildGrid = function (scope) {
return powerGridMethods.bindData(powerGridMethods.buildHeader(scope.options), scope);
};
});
angular.module('powerGridAngular').service('powerGridMethods', function ($http, $compile) {
this.getJson = function (url) {
console.log(url);
return $http.get(url);
};
this.buildHeader = function (options) {
// create table element
var table = angular.element('<table></table>').addClass('table table-striped');
// create header element
var header = angular.element('<tr></tr>');
// run trough each header field and add them to header
angular.forEach(options[0]['headerFields'], function (val, key) {
header.append(angular.element('<th>' + val + '</th>'));
});
// check if grid has edit, if it have, adds a new blank field header
if (options[0]['hasEdit'] == true)
header.append('<th></th>');
// append header to table
table.append(header);
return table;
}
this.bindData = function (table, scope) {
// get grid options
var options = scope.options;
// get grid data via JSON
var gridData = this.getJson(options[0]['dataUrl']).success(function (data) {
// run rows
angular.forEach(data, function (rowVal, rowKey) {
// create row
var cellRow = angular.element('<tr></tr>');
// run through rows
angular.forEach(rowVal, function (cellVal, cellKey) {
// create through cells
cellRow.append(angular.element('<td></td>').text(cellVal));
});
// check if grid has actions
if (options[0]['hasEdit'] == true) {
// cell that contains icon to open options
cellRow.append(angular.element('<td style="width:30px" ng-click="editRow()"></td>').html('<span class="glyphicon glyphicon-menu-hamburger openMenu" aria-hidden="true"></span>'));
// options menu root
var menuRoot = angular.element('<div></div>').addClass('orgPgOptPanel');
// run through options
angular.forEach(options[0]['actions'], function (val, key) {
// create menu row
var menuItem = angular.element('<div></div>').addClass('orgPgOptPanelMenuItem');
// add menu html
menuItem.append(angular.element(val['menuHtml']));
// append menu item to menu container
menuRoot.append(menuItem);
});
// append menu root
cellRow.append(menuRoot);
}
// append all table cells to table
table.append(cellRow);
});
});
// compile directives
$compile(table.contents())(scope);
// return all table content already compiled
return table;
}
});
呼叫
angular.module('pisApp')。controller('regionalCtrl',函数($ scope,powerGridContainer,$ compile){
$scope.editRow = function () {
console.log('called');
}
$scope.tst = 30;
$scope.editRow();
// header
$scope.header = ['Código', 'Regional']
// get grid data
$scope.gridContainer = angular.element('#gridContainer');
// define options
$scope.options = [{
headerFields: $scope.header,
hasEdit: true,
dataUrl:"../Handlers/Queries/dataGridJsons/getAllRegionals.ashx",
actions: [{
menuHtml: '<button type="button" ng-click="editRow()">Click me!</button>'
},
{
menuHtml:'<span id="spn" class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Editar</a>'
},
{
menuHtml:'<span id="spn" class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Editar</a>'
}
]
}];
// bind grid
$scope.varReturn = powerGridContainer.buildGrid($scope);
var content = angular.element("#gridContainer").append($scope.varReturn);
});
最佳答案
我想我看到了问题。 this.getJson
进行异步调用,而$compile
则被同步调用-在追加表的内容之前。
解决方案是确保在异步回调附加的元素上运行$compile
。
我可能会这样做:
更改:
// append all table cells to table
table.append(cellRow);
至:
// compile table row
$compile(cellRow)(scope);
// append all table cells to table
table.append(cellRow);
或者,您可以只在成功回调的末尾运行
$compile(table)(scope);
。关于javascript - ng-click在调用$ compile后不会触发事件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39475471/