我在Angularjs中创建了一个指令，现在将模型数据绑定到指令中，问题是我正在使用JqGrid，并且我希望在JqGrid的gridcomplete事件调用时调用一个函数。
当我们将函数代码直接用于指令时，一切正常，但是当试图从中调用它时 模型然后它无法调用。
将代码粘贴到快照中并突出显示问题。
> var app = angular.module('BOneApp', []);
>
> app.directive('jqGrid', function ($compile) {
>
> var jqGridCounter = 0;
>
> return {
> replace: true,
> restrict: 'E',
> scope: {
> gridData: '='
> },
> template: '<div>' +
> '<table></table>' +
> '<div class="jqgrid-pagination"></div>' +
> '</div>',
> controller: function ($scope, $element) {
> $scope.editRow = function (row) {
> $element.find('table').editRow(row);
> };
> $scope.saveRow = function (row) {
> $element.find('table').saveRow(row);
> };
> $scope.restoreRow = function (row) {
> $element.find('table').restoreRow(row);
> };
> },
> link: function (scope, element) {
> var gridNumber = jqGridCounter++;
> var wrapperId = 'jqgrid-' + gridNumber;
> element.attr('id', wrapperId);
>
> var tableId = 'jqgrid-table-' + gridNumber;
> var table = element.find('table');
> table.attr('id', tableId);
>
> var pagerId = 'jqgrid-pager-' + gridNumber;
> element.find('.jqgrid-pagination').attr('id', pagerId);
>
> table.jqGrid({
> id:scope.gridData.id,
> url: scope.gridData.url,
> datatype: "json",
> height: 'auto',
> colNames: scope.gridData.colNames || [],
> colModel: scope.gridData.colModel || [],
> rowNum: 10,
> rowList: [10, 20, 30],
> pager: '#' + pagerId,
> sortname: 'id',
> toolbarfilter: true,
> viewrecords: true,
> sortorder: "asc",
>
> gridComplete: scope.gridData.gridComplete(),
> //editurl: scope.gridData.editurl,
> caption: scope.gridData.caption,
> multiselect: scope.gridData.multiselect,
> autowidth: true
>
> });
> table.jqGrid('navGrid', '#' + pagerId, {
> edit: true,
> add: true,
> del: true
> });
> table.jqGrid('inlineNav', '#' + pagerId);
>
>
> element.find(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
> element.find(".ui-jqgrid-view").children().removeClass("ui-widget-header
> ui-state-default");
> element.find(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default
> ui-th-column ui-th-ltr");
> element.find(".ui-jqgrid-pager").removeClass("ui-state-default");
> element.find(".ui-jqgrid").removeClass("ui-widget-content");
>
> // add classes
> element.find(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
> element.find(".ui-jqgrid-btable").addClass("table table-bordered table-striped");
>
> element.find(".ui-pg-div").removeClass().addClass("btn btn-sm btn-primary");
> element.find(".ui-icon.ui-icon-plus").removeClass().addClass("fa
> fa-plus");
> element.find(".ui-icon.ui-icon-pencil").removeClass().addClass("fa
> fa-pencil");
> element.find(".ui-icon.ui-icon-trash").removeClass().addClass("fa
> fa-trash-o");
> element.find(".ui-icon.ui-icon-search").removeClass().addClass("fa
> fa-search");
> element.find(".ui-icon.ui-icon-refresh").removeClass().addClass("fa
> fa-refresh");
> element.find(".ui-icon.ui-icon-disk").removeClass().addClass("fa
> fa-save").parent(".btn-primary").removeClass("btn-primary").addClass("btn-success");
> element.find(".ui-icon.ui-icon-cancel").removeClass().addClass("fa
> fa-times").parent(".btn-primary").removeClass("btn-primary").addClass("btn-danger");
>
> element.find(".ui-icon.ui-icon-seek-prev").wrap("<div class='btn btn-sm btn-default'></div>");
> element.find(".ui-icon.ui-icon-seek-prev").removeClass().addClass("fa
> fa-backward");
>
> element.find(".ui-icon.ui-icon-seek-first").wrap("<div class='btn btn-sm btn-default'></div>");
> element.find(".ui-icon.ui-icon-seek-first").removeClass().addClass("fa
> fa-fast-backward");
>
> element.find(".ui-icon.ui-icon-seek-next").wrap("<div class='btn btn-sm btn-default'></div>");
> element.find(".ui-icon.ui-icon-seek-next").removeClass().addClass("fa
> fa-forward");
>
> element.find(".ui-icon.ui-icon-seek-end").wrap("<div class='btn btn-sm btn-default'></div>");
> element.find(".ui-icon.ui-icon-seek-end").removeClass().addClass("fa
> fa-fast-forward");
>
> $(window).on('resize.jqGrid', function () {
> table.jqGrid('setGridWidth', $("#content").width());
> });
>
> $compile(element.contents())(scope);
> }
> } });
>
>
> app.controller('CostCenter', function ($scope) {
>
> $scope.gridData = {
> url: baseURL + "/CompanyAdmin/GetCostCenterForCompanyAdmin",
> //editurl: "/Tables/Edit",
> caption: "Cost Centers",
> colNames: ['Actions', 'ID', 'Parent Code', 'Parent Name', 'Code', 'Name', 'Address', 'Contact Number', 'Website'],
> colModel: [
> { name: 'act', index: 'act', sortable: false },
> { name: 'ID', index: 'ID', key: true, hidden: true },
> { name: 'ParentCode', index: 'ParentCode', editable: true },
> { name: 'ParentName', index: 'ParentName', editable: true },
> { name: 'Code', index: 'Code', editable: true },
> { name: 'Name', index: 'Name', editable: true },
> { name: 'Address', index: 'Address', editable: true/*, searchoptions: { sopt: ['eq', 'ne', 'cn'] }*/ },
> { name: 'ContactNumber', index: 'ContactNumber', editable: true },
> { name: 'Website', index: 'Website', editable: true/*, edittype: 'select', editoptions: { value:
> sa_EditOpt(arr_AccountNumbers, 'Id', 'ACNumber') } */ }
> ],
> multiselect: false,
> gridComplete: function () { **/* Need to call this function into run time in directive */**
>
> var gridid = $("#jqgrid-table-0");
> var ids = gridid.jqGrid('getDataIDs');
> for (var i = 0; i < ids.length; i++) {
> var cl = ids[i];
> be = "<a class='btn btn-xs btn-default' data-original-title='Edit Row'
> href=\"/CompanyAdmin/UpdateBusinessEntity/" + cl + "\"><i class='fa
> fa-pencil'></i></a>";
> ac = "<a class='btn btn-xs btn-default' data-original-title='Edit Row' href=\"/CompanyAdmin/Create?ParentID="
> + cl + "\"><i class='fa fa-sitemap'></i></a>";
> jQuery(gridid).jqGrid('setRowData', ids[i], {
> act: be + ac
> });
> }
> },
>
> };
>
> });
答案 0 :(得分：1)
以下是一个可以满足您需求的工作示例：
http://plnkr.co/edit/bN5KOtehElJqNP3C7CkD?p=preview
您可以使用与从外部绑定数据相同的方式绑定函数 - ＆gt;内部范围。这里，gridComplete使用双向绑定从外部作用域（控制器作用域）绑定到内部作用域。它在编译后立即在链接函数中调用，但它可以随时调用。
// Code goes here
angular.module('MyApp', [])
.controller('MainCtrl', ['$scope',
function($scope) {
$scope.gridData = {
gridComplete: function() {
console.log("someFn was executed!")
}
}
}
])
.directive('directiveWithFn', function() {
return {
restrict: 'A',
$scope: {
'gridData': '='
},
link: function(scope, elem) {
// Call the function after compile
scope.gridData.gridComplete();
}
}
})
答案 1 :(得分：1)
我想，在您的指令代码中，您在链接时直接执行该函数，并且由于它无法在gridComplete事件上执行。
尝试改变
您的指令代码中的gridComplete: scope.gridData.gridComplete()
gridComplete: scope.gridData.gridComplete。
因此它可以在gridComplete事件上执行。
答案 2 :(得分：1)
在探索了许多angularjs官方找到解决方案后
angular.module('getterSetterExample', [])
.controller('ExampleController', ['$scope', function($scope) {
var _name = 'Brian';
$scope.user = {
name: function(newName) {
if (angular.isDefined(newName)) {
_name = newName;
}
return _name;
}
};
}]);
现在我的代码看起来像在块中添加了“event_gridComplete”函数，然后从指令调用。
工作！
var app = angular.module('BOneApp', []);
app.directive('jqGrid', function ($compile) {
var jqGridCounter = 0;
return {
replace: true,
restrict: 'E',
scope: {
gridData: '='
},
template: '<div>' +
'<table></table>' +
'<div class="jqgrid-pagination"></div>' +
'</div>',
controller: function ($scope, $element) {
$scope.editRow = function (row) {
$element.find('table').editRow(row);
};
$scope.saveRow = function (row) {
$element.find('table').saveRow(row);
};
$scope.restoreRow = function (row) {
$element.find('table').restoreRow(row);
};
},
link: function (scope, element) {
var gridNumber = jqGridCounter++;
var wrapperId = 'jqgrid-' + gridNumber;
element.attr('id', wrapperId);
var tableId = 'jqgrid-table-' + gridNumber;
var table = element.find('table');
table.attr('id', tableId);
var pagerId = 'jqgrid-pager-' + gridNumber;
element.find('.jqgrid-pagination').attr('id', pagerId);
table.jqGrid({
id:scope.gridData.id,
url: scope.gridData.url,
datatype: "json",
height: 'auto',
colNames: scope.gridData.colNames || [],
colModel: scope.gridData.colModel || [],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#' + pagerId,
sortname: 'id',
toolbarfilter: true,
viewrecords: true,
sortorder: "asc",
gridComplete: scope.gridData.gridComplete.event_gridComplete,
//editurl: scope.gridData.editurl,
caption: scope.gridData.caption,
multiselect: scope.gridData.multiselect,
autowidth: true
});
table.jqGrid('navGrid', '#' + pagerId, {
edit: true,
add: true,
del: true
});
table.jqGrid('inlineNav', '#' + pagerId);
element.find(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
element.find(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
element.find(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
element.find(".ui-jqgrid-pager").removeClass("ui-state-default");
element.find(".ui-jqgrid").removeClass("ui-widget-content");
// add classes
element.find(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
element.find(".ui-jqgrid-btable").addClass("table table-bordered table-striped");
element.find(".ui-pg-div").removeClass().addClass("btn btn-sm btn-primary");
element.find(".ui-icon.ui-icon-plus").removeClass().addClass("fa fa-plus");
element.find(".ui-icon.ui-icon-pencil").removeClass().addClass("fa fa-pencil");
element.find(".ui-icon.ui-icon-trash").removeClass().addClass("fa fa-trash-o");
element.find(".ui-icon.ui-icon-search").removeClass().addClass("fa fa-search");
element.find(".ui-icon.ui-icon-refresh").removeClass().addClass("fa fa-refresh");
element.find(".ui-icon.ui-icon-disk").removeClass().addClass("fa fa-save").parent(".btn-primary").removeClass("btn-primary").addClass("btn-success");
element.find(".ui-icon.ui-icon-cancel").removeClass().addClass("fa fa-times").parent(".btn-primary").removeClass("btn-primary").addClass("btn-danger");
element.find(".ui-icon.ui-icon-seek-prev").wrap("<div class='btn btn-sm btn-default'></div>");
element.find(".ui-icon.ui-icon-seek-prev").removeClass().addClass("fa fa-backward");
element.find(".ui-icon.ui-icon-seek-first").wrap("<div class='btn btn-sm btn-default'></div>");
element.find(".ui-icon.ui-icon-seek-first").removeClass().addClass("fa fa-fast-backward");
element.find(".ui-icon.ui-icon-seek-next").wrap("<div class='btn btn-sm btn-default'></div>");
element.find(".ui-icon.ui-icon-seek-next").removeClass().addClass("fa fa-forward");
element.find(".ui-icon.ui-icon-seek-end").wrap("<div class='btn btn-sm btn-default'></div>");
element.find(".ui-icon.ui-icon-seek-end").removeClass().addClass("fa fa-fast-forward");
$(window).on('resize.jqGrid', function () {
table.jqGrid('setGridWidth', $("#content").width());
});
$compile(element.contents())(scope);
}
}
});
app.controller('CostCenter', function ($scope) {
$scope.gridData = {
url: baseURL + "/CompanyAdmin/GetCostCenterForCompanyAdmin",
//editurl: "/Tables/Edit",
caption: "Cost Centers",
colNames: ['Actions', 'ID', 'Parent Code', 'Parent Name', 'Code', 'Name', 'Address', 'Contact Number', 'Website'],
colModel: [
{ name: 'act', index: 'act', sortable: false },
{ name: 'ID', index: 'ID', key: true, hidden: true },
{ name: 'ParentCode', index: 'ParentCode', editable: true },
{ name: 'ParentName', index: 'ParentName', editable: true },
{ name: 'Code', index: 'Code', editable: true },
{ name: 'Name', index: 'Name', editable: true },
{ name: 'Address', index: 'Address', editable: true/*, searchoptions: { sopt: ['eq', 'ne', 'cn'] }*/ },
{ name: 'ContactNumber', index: 'ContactNumber', editable: true },
{ name: 'Website', index: 'Website', editable: true/*, edittype: 'select', editoptions: { value: sa_EditOpt(arr_AccountNumbers, 'Id', 'ACNumber') } */ }
],
multiselect: false,
gridComplete: {
event_gridComplete: function () {
var gridid = $("#jqgrid-table-0");
var ids = gridid.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<a class='btn btn-xs btn-default' data-original-title='Edit Row' href=\"/CompanyAdmin/UpdateBusinessEntity/" + cl + "\"><i class='fa fa-pencil'></i></a>";
ac = "<a class='btn btn-xs btn-default' data-original-title='Edit Row' href=\"/CompanyAdmin/Create?ParentID=" + cl + "\"><i class='fa fa-sitemap'></i></a>";
jQuery(gridid).jqGrid('setRowData', ids[i], {
act: be + ac
});
}
} },
};
});
答案 3 :(得分：0)
您不应该在控制器内部进行任何DOM操作。这些行：
var gridid = $("#jqgrid-table-0");
var ids = gridid.jqGrid('getDataIDs');
可以使用element参数在指令内部执行（对于此特定用例，您可以使用当前指令或不同指令）。将其置于指令中的另一种方法是使其成为可选属性，即：
scope: {
gridData: '=',
editButtons: '@'
},
link: function (scope, element) {
...
if(scope.editButtons){
var ids = element.jqGrid('getDataIDs');
...
}
编辑按钮也不应该在控制器内部完成。您应该将它们移到模板中，或者将它们添加到链接函数中。
将jqGrid与Angular一起使用总体上是一个坏主意。有一些基于角度的网格可以更清晰的方式与您的应用程序进行映射，例如：http://ui-grid.info/
如果您决定将所有这些演示逻辑保留在控制器内，那么您应该修复此行：
gridComplete: scope.gridData.gridComplete(),
您在分配期间调用该功能，因此分配功能的结果，而不是功能本身。它应该是：
gridComplete: scope.gridData.gridComplete,