ng-click не срабатывает даже после вызова $ compile

0

Я создаю модуль DataGrid с некоторыми действиями, но ng-click не будет запускать событие после добавления оператора компиляции $

МОДУЛЬ

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', function ($ 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>&nbsp;Editar</a>'
                },
                 {
                    menuHtml:'<span id="spn" class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;Editar</a>'
                }
            ]
        }];
        // bind grid
        $scope.varReturn = powerGridContainer.buildGrid($scope);
        var content = angular.element("#gridContainer").append($scope.varReturn);

    });
  • 0
    где именно вы определяете и вызываете this.bindData = function .... ? где называется scope вы вводите?
  • 0
    Здравствуйте, @ plong0 код обновлен извините ...
Показать ещё 3 комментария
Теги:

1 ответ

1
Лучший ответ

Кажется, я вижу проблему. 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); в конце успешного обратного вызова.

  • 0
    Большое спасибо, чувак! Я уже сходил с ума, ха-ха ... Проблема решена!
  • 0
    ты чувак ... это немного сдвиг думать асинхронно;)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню