vitalets
How to implement custom select directive with custom fields
I have attempted to implement a custom directive for a
The way it works is the custom entry has values of -1 for width and height. When the user selects the custom entry, two input fields are dynamically displayed for the user to enter a custom resolution. At the end, we add the new resolution to the list of options, and add a new custom entry for the next time they want to add one.
The problem comes when adding this directive to an editable table, where the whole table is editable at once. In my code, I store the entered value in the $data field of the directive's scope. If the user enters more than one custom value during an edit session, the 2nd one always wins, because there is only a single instance of the directive, even though there are multiple rows with this special widget displayed. I didn't try it, but I would not be surprised if the datapicker directive exhibited the same problem if used in a table where the entire table were editable and dates on multiple rows were changed, due to the use of the $data field on the directive's scope.
Can anyone think of a way I can store the custom values so that they are not lost, and the last one isn't always the one that wins? Here is the code for my custom directive:
angular.module('xeditable').directive('editableResolution', ['editableDirectiveFactory',
function (editableDirectiveFactory) {
return editableDirectiveFactory({
directiveName: 'editableResolution',
inputTpl: '<select></select>',
render: function () {
this.parent.render.call(this);
var customResolution = angular.element('<div class="customResolution form-inline" style="margin-top: 7px;"><table style="background-color:transparent"><tbody><tr><td><input type="number" min="1" max="9999" style="width:50px;" class="form-control-border input-sm resolution-width"/></td><td>x</td><td><input type="number" min="1" max="9999" style="width:50px;" class="form-control-border input-sm resolution-height"/></td></tr></tbody></table></div>');
var self = this;
this.inputEl.change(function() {
var isCustom = ($(this).find('option:selected').text() == vvo.templates.model.DisplayableResolution.CUSTOM_TEXT);
var resolutionComposite = $.extend({}, customResolution);
if (isCustom && $(this).parent().find(".customResolution").length === 0) {
$(this).parent().append(resolutionComposite);
var widthWidget = $(this).parent().find(".resolution-width");
widthWidget.change(function() {
self.scope.$data.width = $(this).val();
});
var heightWidget = $(this).parent().find(".resolution-height");
heightWidget.change(function() {
self.scope.$data.height = $(this).val();
});
}
resolutionComposite.toggle(isCustom);
});
}
});
}]);
Obviously I am having trouble getting the markdown to work in my original question as well.
Any success ? I'm trying to use "Angular Material" with xeditable and can't find a simple way to wrap the inputs with
For the original question, try the latest version. There were some changes to how scope works for the editable-elements, maybe that will fix your issue.
