Auf diese Weise wird der Wert "editor-provider" als String ausgewertet. Um den Ausdruck zu einem Objekt analysiert werden, müssen Sie es in {{}}
(Doppel geschweiften Klammern) umschließen. Doch die Aussage „neuer $ .ig.EditorProviderNumber()“ wird nicht durch die Angular 1 expression parser analysiert werden, so dass Sie eine Scope-Funktion verwenden müssen, um das Objekt zu erstellen. Hier
ist der Code:
// This editor provider demonstrates how to wrap HTML 5 number INPUT into editor provider for the igGridUpdating
$.ig.EditorProviderNumber = $.ig.EditorProviderNumber || $.ig.EditorProvider.extend({
// initialize the editor
createEditor: function (callbacks, key, editorOptions, tabIndex, format, element) {
element = element || $('<input type="number" />');
/* call parent createEditor */
this._super(callbacks, key, editorOptions, tabIndex, format, element);
element.on("keydown", $.proxy(this.keyDown, this));
element.on("change", $.proxy(this.change, this));
this.editor = {};
this.editor.element = element;
return element;
},
keyDown: function(evt) {
var ui = {};
ui.owner = this.editor.element;
ui.owner.element = this.editor.element;
this.callbacks.keyDown(evt, ui, this.columnKey);
// enable "Done" button only for numeric character
if ((evt.keyCode >= 48 && evt.keyCode <= 57) || (evt.keyCode >= 96 && evt.keyCode <= 105)) {
this.callbacks.textChanged(evt, ui, this.columnKey);
}
},
change: function (evt) {
var ui = {};
ui.owner = this.editor.element;
ui.owner.element = this.editor.element;
this.callbacks.textChanged(evt, ui, this.columnKey);
},
// get editor value
getValue: function() {
return parseFloat(this.editor.element.val());
},
// set editor value
setValue: function (val) {
return this.editor.element.val(val || 0);
},
// size the editor into the TD cell
setSize: function (width, height) {
this.editor.element.css({
width: width - 2,
height: height - 2,
borderWidth: "1px",
backgroundPositionY: "9px"
});
},
// attach for the error events
attachErrorEvents: function (errorShowing, errorShown, errorHidden) {
// implement error logic here
},
// focus the editor
setFocus: function() {
this.editor.element.select();
},
// validate the editor
validator: function() {
// no validator
return null;
},
// destroy the editor
destroy: function() {
this.editor.remove();
}
});
sampleApp.controller('sampleAppCtrl', function ($scope) {
$scope.getProvider = function() {return new $.ig.EditorProviderNumber()};
});
<column-setting column-key="ProductNumber" editor-provider="{{getProvider()}}"></column-setting>
Was ist der Ignite UI-Version, die Sie verwenden? Um die Version zu erhalten, führen Sie bitte den folgenden Code in der JavaScript-Konsole aus: $ .ui.igGrid.version –