Customized editableTextAngular

[bmickoski]

Can I use e-maxlength with customized xeditable text angular directive? I am using this directive:

angular.module('xeditable').directive('editableTextAngular', ['editableDirectiveFactory',
function(editableDirectiveFactory) {
return editableDirectiveFactory({
directiveName: 'editableTextAngular',
inputTpl: "

",
addListeners: function() {
var self = this;
self.parent.addListeners.call(self);
// submit textarea by ctrl+enter even with buttons
if (self.single && self.buttons !== 'no') {
self.autosubmit();
}
},
autosubmit: function() {
var self = this;
self.inputEl.bind('keydown', function(e) {
if ((e.ctrlKey || e.metaKey) && (e.keyCode === 13)) {
self.scope.$apply(function() {
self.scope.$form.$submit();
});
}
});
}
});
}
]);

I tried to use e-max-length but it is not working... I tried also to use this directive https://github.com/alexander-elgin/ta-maxlength but again no success...

[ckosloski]

Your inputTpl above is empty. Shouldn't it be <div text-angular></div>
Also, e-max-length is incorrect. Shouldn't it be e-ta-max-text? textAngular/textAngular#308

[bmickoski]

For some reason it is showing is empty but I have it as :

text-angular

[bmickoski]

If I add e-ta-max-text="5" it allows me to add more than 5 characters but when click on Save button it does not get binded to div but how can i controle that? I mean to have function when click on Save button to check if I have more than 5 and show some message? Here is how I use it:

[ckosloski]

When you add e-ta-max-text, do you see that attribute added to your text-angular div?
You might want to create a plunker/jsfiddle showing your issue.
Your "how you use it" code is not displaying.
How is the ta-max-text supposed to work? Does text-angular allow you to enter more characters, but display an error?

[bmickoski]

Hey @ckosloski I am not sure why I cannot run x-editable in this plunker:

https://plnkr.co/edit/CKZ9DeHee4pk7GUjVim2?p=preview

sorry, I am not so good with plunker. To answer your question above:

When I add e-ta-max-text I see atribute in my text-angular. When i click on href and add more than 5 characters and click on Save button that text is not binded to div tag which is good, it means e-ta-max-text is working. My question was how to check this on href click in some function for example and show message above this x-editable?

[bmickoski]

What I meant was how to have control on Save button after I enter text and click on that button. And how to check if I have over max character error to show some message...

[ckosloski]

If you look at your console of your plunker, you will see:
Blocked loading mixed active content “http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css”
You need to have https for your xeditable includes.
If you can fix your plunker to work so that I can see the issue, I will try to help.

[bmickoski]

Hey @ckosloski I got read of the errors.. I added xeditable.js file and modified editableTextarea in editableTextAngular. However I cannot show this editableTextAngular href....You have some idea why is that?

https://plnkr.co/edit/CKZ9DeHee4pk7GUjVim2?p=preview

[ckosloski]

See if this helps you. Click edit, type more than 5 characters, see error appear.

[bmickoski]

Omg.. @ckosloski this was exactly what i needed!!! Thank you so much for your help!!!

[ckosloski]

ok, then please close this issue.

[bmickoski]

Hey @ckosloski I tried your way for max length and I am getting this message that character limit is exteneded... However after I open editable-text-angular for second or third etc.. time I am getting this error:

angular.js:11706 textAngular Error: An Editor with name "title" already exists <div text-angular="" ta-max-text="5" name="title" class="editable-input ng-pristine ng-untouched ng-valid ng-isolate-scope ta-root" ng-model="$data">

I tried to open inspect element amd I see editable-text-angular is there twice.

https://snag.gy/XfPClx.jpg

I was researching on some issues for this and found this 👍

textAngular/textAngular#240

but I tried with {{$index]} and it was same.... Can you help me with this?

[bmickoski]

My code:

<div class="form-group text-center">
                <form editable-form name="editableForm">
                    <label class="col-md-3 control-label" data-ng-show="reviewvm.foType == 'finding'"><span class="text-danger">*</span>Finding:</label>
                    <label class="col-md-3 control-label" data-ng-show="reviewvm.foType == 'observation'"><span class="text-danger">*</span>Observation:</label>
                    <div class="col-md-9 form-control-static text-left">
                        <a class="clickable" editable-text-angular="reviewvm.findingOrObservationTitle" e-ta-max-text="5" e-name="title">
                            <div data-ng-bind-html="reviewvm.findingOrObservationTitle"></div>
                        </a>
                        <a class="clickable" ng-click="editableForm.$show()" ng-show="!editableForm.$visible">
                            <span data-ng-show="!reviewvm.findingOrObservationTitle'">Click to add the Finding</span>
                            <span data-ng-show="reviewvm.findingOrObservationTitle">Click to edit the Observation</span>
                        </a>
                        <div ng-if="editableForm.title.$error.taMaxText" class="text-danger">Too much text!</div>
                    </div>
                     <span ng-show="editableForm.$visible">
                      <button type="submit" class="btn btn-primary" ng-disabled="editableForm.$waiting">
                          Save
                      </button>
                      <button type="button" class="btn btn-default" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()">
                          Cancel
                      </button>
                    </span>
                    <div class="col-md-3 col-md-offset-3" ng-if="reviewvm.findingOrObservationTitle === '' && reviewvm.foType == 'finding'" style="color:maroon" role="alert">
                        <div class="help-block alert alert-danger form-group">The Finding is a required field</div>
                    </div>
                    <div class="col-md-3 col-md-offset-3" ng-if="reviewvm.findingOrObservationTitle === '' && reviewvm.foType == 'observation'" style="color:maroon" role="alert">
                        <div class="help-block alert alert-danger form-group">The Observation is a required field</div>
                    </div>
                </form>
            </div>

[ckosloski]

What version of xeditable are you using?

[bmickoski]

"angular-xeditable": "~0.1.10",
"textAngular": "~1.5.0",

[ckosloski]

Please use the latest version 0.5.0. There were some changes in a recent version that fixed some of these scope issues.

[bmickoski]

@ckosloski I updated to 0.5.0 and this errors were removed... Thank you so much for your quick responses and help!!!