Angularjs で 1 つのディレクティブを作成し、モデル データをディレクティブにバインドしました。問題は、JqGrid を使用していて、JqGrid の gridcomplete イベントが呼び出されるときに 1 つの関数を呼び出したいことです。
関数コードをディレクティブに直接使用すると、すべて正常に機能しますが、モデルから呼び出そうとすると、呼び出すことができません。
コードを貼り付けて問題を強調表示することもスナップします。
> 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
> });
> }
> },
>
> };
>
> });