ui-tinymce
ui-tinymce copied to clipboard
Accidentally $setPristine on parent form controller
I'm encounter problem caused by this line of code https://github.com/angular-ui/ui-tinymce/blob/master/src/tinymce.js#L84 which set parent form a pristine state on its init event. I use ui-tinymce inside an ngIf which may cause the ui-tinymce initialize multiple times when user switch between different type of model
it looks like this snippet
<div ng-if="component.type==='image'">
<image-component ng-model="component.data"></image-component>
</div>
<div ng-if="component.type==='text'">
<textarea ng-model="component.data" ui-tinymce></textarea>
</div>
So what I expect is the ui-tinymce should not invoke form.$setPristine() on its initialisation.
My workaround is wrapping the ui-tinymce with a ngForm controller and override its $setPristine method to prevent it change parent form pristine state
I need to think about this a bit. I forget exactly why we make the form pristine also, since it might not be the only thing in the form.
Thanks for posting a work around, I am open to suggestions on the proper way to fix this. We could remove it, make it configurable, or something else I haven't thought of yet...
Hey guys. Same problem here. I passed hours trying to understand why my form got pristine after ui-tinymce has been initialized.
I'm going to use the suggested workaround until we discover why it sets the parent form to pristine.
Yep, the workaround worked like a charm. Hey @deeg, let me know if you need some help with this.
@pelizza, please feel free to put out a PR so we can review.
Here is it: https://github.com/angular-ui/ui-tinymce/pull/259
Hey @deeg, I appreciate if you can review the pull request :) It's been a while since I created it...
Thanks!
After trying to figure out where the largest lag is in initializing tinymce in my system (lots of editors across multiple tabs), I found that setting $pristine on the parent forms was one of the largest factors.
After applying the fix, I saw a HUGE increase in performance!
Thanks @pelizza
@lordfriend : you can tell me method override $setPristine by decorator? thank you
@HaiTrung This solution is not a decorator, because $setPristine should only be override on the formController which wraps the the ui-tinymce.
I use a directive to do this job.
return {
restrict: 'EA',
scope: {
data: '=ngModel',
name: '@'
},
template: '<div class="rich-text-component component-wrapper" ng-form="richTextEditorForm">' +
'<textarea cols="30" rows="6" ng-model="data.text" ui-tinymce class="form-control"></textarea>' +
'</div>' +
'</div>',
link: function (scope) {
scope.richTextEditorForm.$setPristine = function () {
console.log('prevent default set pristine action');
};
}
};
thank u very much