我在一个数据表的行中有两个按钮，每个按钮在click事件上都有自己的功能。 当我点击它的按钮时，第二个功能不起作用的问题，但是当我点击第一个功能时，第二个功能的确无法工作
这是完整的控制器：
(function () {
'use strict';
var table
angular.module('app')
.controller('wfCtrl', wfCtrl);
function wfCtrl($scope, $location, $http) {
$http({
method: 'GET',
url: 'http://localhost:8080/Spring4/data/lworkflows'
}).then(function successCallback(response) {
var wfs = response.data;
table = $('#example1').DataTable({
"data": wfs,
"columns": [{
"className": 'details-control',
"orderable": false,
"data": "",
"defaultContent": ''
}, {
"data": "code"
}, {
"data": "statut"
}, {
"data": "label"
}, {
"data": "langue"
}, {
"data": "description"
}, {
"orderable": false,
"defaultContent": "<div class='btn-group'>" +
"<button type='button' class='btn btn-success addst-btn' title='add a step' data-toggle='modal' data-target='#modal-addst'><i class='fa fa-plus'></i></button>" +
"<button type='button' class='btn btn-info'><i class='fa fa-pencil-square-o' title='edit workflow'></i></button>" +
"<button type='button' class='btn btn-danger' title='delete workflow'><i class='fa fa-trash' ></i></button>" +
"</div>"
}
],
"order": [[1, "asc"]]
});
}, function errorCallback(response) {
console.log("error");
});
function format(d) {
$scope.modal = d;
if (d.length == 0) {
return "No steps"
}
var row = ""
for (var i = 0; i < d.length; i++) {
row += "<tr>" +
"<td>" + d[i].ordre + "</td>" +
"<td>" + d[i].label + "</td>" +
"<td>" + d[i].type + "</td>" +
"<td>" + d[i].mode + "</td>" +
"<td><button type='button' class='btn btn-xs btn-info' data-toggle='modal' data-target='#modal-default" + d[i].ordre + "'>Jump list</button></td>" +
"<td><button type='button' class='btn btn-xs btn-info' data-toggle='modal' data-target='#modal-default'>Consequence list</button></td>" +
"</tr>"
}
return "<i>Liste du Steps</i><br /><table class='table table-condensed table-hover'>" +
"<tbody><tr>" +
"<th style='width: 10px'>#</th>" +
"<th>Label</th>" +
"<th>Type</th>" +
"<th>Mode</th>" +
"<th>Jump</th>" +
"<th>Consequences</th>" +
"</tr>" + row +
"</tbody></table>";
}
$('#example1 tbody').on('click', '.addst-btn', function () {
var tr = $(this).closest('tr');
$scope.selectedrow = table.row(tr).data().code;
console.log("ok");
alert($scope.selectedrow);
console.log($scope.selectedrow + " a ");
});
$('#example1 tbody').on('click', 'td.details-control', function () {
//console.log(this);
//$(".details-control").not(this).click();
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
$http({
method: 'GET',
url: 'http://localhost:8080/Spring4/data/steps?code=' + row.data().code
}).then(function successCallback(response) {
var tr1 = $(".shown");
var row1 = table.row(tr1);
row1.child.hide();
tr1.removeClass('shown');
row.child(format(response.data.ls)).show();
tr.addClass('shown');
}, function errorCallback(response) {
console.log("error");
});
}
});
}
})();
问题是当我点击#addst-btn时总是没有设置范围selectedrow但是当我点击details-control
时它会起作用任何人都能解释一下吗？感谢。
加，
当我在函数中添加了一个$ http请求时，我得到了它的工作，不是吗？
$('#example1 tbody').on('click', '.addst-btn', function () {
var tr = $(this).closest('tr');
$scope.selectedrow = table.row(tr).data().code;
console.log("ok");
alert($scope.selectedrow);
console.log($scope.selectedrow + " a ");
});