Как обернуть jQuery (по умолчанию) handsontable внутри директивы AngularJS?

Question

Как обернуть jQuery (по умолчанию) handsontable внутри директивы AngularJS?

0

Здесь у меня есть мобильная работа в приложении, отличном от AngularJS, и я работаю над новой версией программного обеспечения, которое широко использует AngularJS (SPA).

Я бы знал: есть ли способ обернуть существующую рукотворную реализацию внутри директивы AngularJS без переписывания всего?

Заранее спасибо!

var hot = new Handsontable(container, {
    colHeaders: configTable.columnsHeader,
    columns: configTable.columnsConfig,
    colWidths: configTable.colWidths,
    rowHeight: 5,
    data: configTable.data,
    minSpareRows: 0,
    rowHeaders: false,
    contextMenu: false,
    currentRowClassName: 'row_selected',
    height: parentWindowHeight,
    width: parentWindowWidth,
    multiSelect: false,
    autoWrapRow: true,
    autoWrapCol: true,
    fillHandle: false,
    afterOnCellMouseOver: function (event, coords, cell) {
        // Long Implementation...
    },
    afterOnCellMouseDown: function (r, p, r2, p2) { //(r: Number, p: Number, r2: Number, p2: Number)
        // Long Implementation...
    },
    beforeKeyDown: function (event) { // event: Object
    },
    beforeChange: function (changes, source) { //(changes: Array, source: String)
        // Long Implementation...
    },
    afterChange: function (changes, source) { // (changes: Array, source: String)
        // Long Implementation...
    },
    beforeValidate: function (value, row, prop, source) { // value: Mixed, row: Number, prop: String, source: String
        valorMaximo = numeral($(hot.getColHeader()[prop]).data('valor')).value();
    },
    cells: function (row, col, prop) {
        var cellProperties = {};

        var sit = $(this.instance.getData()[row][0])[0];

        if (sit !== undefined) {
            sit = sit.value;

            if (sit != "1" && sit != "+" && sit != "-" && sit != "*") {
                cellProperties.readOnly = true;
                cellProperties.renderer = disabledRowRenderer;
            }
        }

        return cellProperties;
    },
    onSelection: function (r, c, r2, c2) { // readOnly cannot be selected
        var sit = $(this.getData()[r][0])[0];
        var meta = this.getCellMeta(r, c);

        if (sit !== undefined) {
            sit = sit.value;

            if (sit != "1" && sit != "+" && sit != "-" && sit != "*") {
                this.deselectCell();
            }
        }

        if (meta.readOnly) {
            this.deselectCell();
        }
    }
});

cezarlamann 28 сен. 2015, в 20:27

Источник

Теги:

javascript

jquery

angularjs

angularjs-directive

handsontable

2 ответа

Ещё вопросы

Bas Slagter · Answer 1 · 2015-09-28T17-03-00.000Z

Да, конечно. Самый простой способ - создать простую директиву, где вы помещаете всю существующую логику в свою функцию ссылок. Вероятно, вам нужно немного настроить код, чтобы получить правильную ссылку на элемент, с которым вы работаете. Видеть:

myApp.directive('handsOnTable', function(){
    return {
        link: function(scope, element){
            // Your code here, using the element attribute.
        }
    };
});

НО... так как вы переходите на AngularJS, я настоятельно рекомендую переписать код. Возможно, это не так сложно и не так много работает. Это даст вам более надежный код, хотя вы, вероятно, можете избавиться от jQuery (что вам нужно, на самом деле). В вашем случае это, вероятно, означает, что большинство параметров, таких как autoWrapRow и autoWrapCol, станут атрибутами вашей директивы и такими методами, как beforeValidate, окажется в контроллере. Что-то вроде:

myApp.directive('handsOnTable', function(){
    return {
        scope: {
          autoWrapRow: '=',
          autoWrapCol: '='
        },
        controller: function($element){
            var vm = this;

            vm.beforeValidate = beforeValidate;

            function beforeValidate(){
               // Do stuff. You can use the $element to do DOM manupulation
               // but you should keep that to a minimum and try to think the
               // Angular way of doing things.
            }
        },
        controllerAs: 'table',
        bindToController: true
    };
});

Надеюсь это немного поможет. Конечно, это зависит от того, насколько хороши вы с Угловым.

Спасибо за ответ! Я подумаю об этом. о /

Grégory Desmaziers · Answer 2 · 2015-09-28T20-52-00.000Z

Вы пытались ngHandsontable библиотека, которая не нуждается в jQuery?

https://github.com/handsontable/ngHandsontable?