Initializing Plugins and 3rd Party Libs (TinyMCE)

[ProLoser]

So I seem to keep coming back to this major design flaw. How/when do I initialize third party plugins? I am guessing that after my logic finishes executing (the event, or the function's init) all the data is then used to rerender the template. However, without some sort of hook or callback by which I can initialize third-party libs on the newly generated DOM, I am sort of screwed.

Long story short, how can I get this demo to load TinyMCE on all 3 textareas instead of just the fixed one?

http://jsfiddle.net/ProLoser/nTzRA/

[Dan Doyon]

To my understanding, if you want to access to angular model objects in a 3rd party plugin, said plugin needs to be wrapped as a widget (in future I think that they will be all directives). As a rule, you should avoid doing any DOM manipulation in your controllers.

I'd look at the existing fiddles

https://github.com/angular/angular.js/wiki/JsFiddle-Examples 

• http://jsfiddle.net/vojtajina/creEk/ - jQuery Cycle plugin wrapper
• http://jsfiddle.net/vojtajina/3Gx42/ - jQuery Carousel plugin wrapper
• http://jsfiddle.net/vojtajina/yy9VA/ - jQuery Raty plugin wrapper

--dan

---

From: ProLoser <dean...@gmail.com>
To: ang...@googlegroups.com
Sent: Thursday, January 5, 2012 3:21 PM
Subject: [angular.js] Initializing Plugins and 3rd Party Libs (TinyMCE)

So I seem to keep coming back to this major design flaw. How/when do I initialize third party plugins? I am guessing that after my logic finishes executing (the event, or the function's init) all the data is then used to rerender the template. However, without some sort of hook or callback by which I can initialize third-party libs on the newly generated DOM, I am sort of screwed.

Long story short, how can I get this demo to load TinyMCE on all 3 textareas instead of just the fixed one?

http://jsfiddle.net/ProLoser/nTzRA/

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/hK8MKm5Ym0YJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[ProLoser]

Thanks!

Your three examples were inconsistent and before that I was looking at another thread and created this fiddle.

Your first example (using Cycle) seems odd because it uses setTimeout(0), the second appears to be broken, but after reviewing your third example I realized I could simply trim down my original version into this fiddle.

I will try to put this into my ui suite and make a general-purpose ui:wysiwyg="tinymce" with other such options.

[ProLoser]

For my example, if I pass an expression to the directive/widget, how can I 'evaluate' it? I tried doing <textarea ui:wysiwyg="x.name"> and <textarea ui:wysiwyg="{{x.name}}"> but in both cases it's only recognized as strings. Should I be doing something like 

var val = this.$eval(expression);

inside the widget?

[Dan Doyon]

So... it looks like you were successful. I should've given you a caveat, the three examples were community contributions (not mine) and could be done on different angular versions and authors.  

sorry if there was any confusion.

--dan

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/HdjWUtZ-hKUJ.

[ProLoser]

After trying a few variations I realized this isn't actually working. First, I created an angular widget, I'm not sure if this conflicts with using other widgets (such as ng:model or other) on the same element. Because of that, I attempted to convert it to a directive, but TinyMCE wouldn't load at all. Despite this, I attempted a few more tests in jsfiddle and realized that the WYSIWYG isn't updating the value of the ng:model. I suppose this makes sense since it may not be triggering the conventional element change event (not sure).

So I thought perhaps I could manually fire a reparse of the compiler, seeing the changes in the textareas and updating the values. This failed too.

Here is one of my example tests, although nothing I have done has been able to be reflected back into a JS variable.

http://jsfiddle.net/ProLoser/nTzRA/6/

[ProLoser]

I figured it out! Check it out: http://jsfiddle.net/ProLoser/nTzRA/

Had to leverage some callbacks in TinyMCE to forcibly update the <textarea> (which apparently occurs right before save only) and also manually trigger the change event so that AngularJs is aware of the change and updates the data accordingly.

There's a small bug when I added <a ng:click="boxes.push({name:'new'})>Add New</a> however. Not sure why. If someone could take a look would be appreciated!

[Dan Doyon]

Great! Well i'm assuming it is, i can't get to jsfiddle right now, giving bad gateway error. I worked on this in morning and was very close to finishing. Looking forward to seeing your solution.

One comment, you might want to consolidate tinymce plugins (if possible) to reduce # of http requests. 

--dan

---

From: ProLoser <dean...@gmail.com>
To: ang...@googlegroups.com

Sent: Monday, January 9, 2012 2:41 PM
Subject: [angular.js] Re: Initializing Plugins and 3rd Party Libs (TinyMCE)

I figured it out! Check it out: http://jsfiddle.net/ProLoser/nTzRA/

Had to leverage some callbacks in TinyMCE to forcibly update the <textarea> (which apparently occurs right before save only) and also manually trigger the change event so that AngularJs is aware of the change and updates the data accordingly.

There's a small bug when I added <a ng:click="boxes.push({name:'new'})>Add New</a> however. Not sure why. If someone could take a look would be appreciated!

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/HjzfNUR2Yr0J.

[ProLoser]

Trust me, I'm well aware of the practice of consolidating assets. Unfortunately I'm getting a separate error trying to actually IMPLEMENT the WYSIWYG, saying something like getElement() is returning null. Very annoying, and there's so much messy code surrounding I'm not sure if it's due to Angular, TinyMCE or just shitty work.

[Matthias Andrasch]

Thanks for the tinymce example!

If I change it to <a ng:click="boxes.push()">Add New</a> it works for me:

http://jsfiddle.net/programmieraffe/dWFPK/

Seems to be a problem with the bracket notation in 10.5. 

Regards,
Matthias

[Dean Sofer]

Actually you are 'programmatically' pushing to the array. I tried moving the related logic into a wrapped function in the controller and simply calling it but it has the same issue.

Try actually TYPING something into the input box. You will notice that inputs that have been inserted later do not properly update their content attribute.

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/863NQGrnZS8J.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

--
Dean J Sofer
Dean...@gmail.com

BS Computer Information Systems
California State Polytechnic University, Pomona
Telephone: 714-900-2254
Website: www.DeanSofer.com 

Github: github.com/ProLoser

[Matthias Andrasch]

Oh sorry, I should drink a coffee first before posting. ;)

But I noticed the error "Object has not method match" occured on pushBoxes. I changed jquery edge in the fiddle to jquery 1.6.4 and for me now it works:

http://jsfiddle.net/programmieraffe/dWFPK/

On Saturday, March 3, 2012 12:43:13 PM UTC+1, ProLoser wrote:

Actually you are 'programmatically' pushing to the array. I tried moving the related logic into a wrapped function in the controller and simply calling it but it has the same issue.

Try actually TYPING something into the input box. You will notice that inputs that have been inserted later do not properly update their content attribute.

On Sat, Mar 3, 2012 at 3:36 AM, Matthias Andrasch <matthias.andrasch@googlemail.com> wrote:

Thanks for the tinymce example!

If I change it to <a ng:click="boxes.push()">Add New</a> it works for me:

http://jsfiddle.net/programmieraffe/dWFPK/

Seems to be a problem with the bracket notation in 10.5. 

Regards,
Matthias

On Monday, January 9, 2012 11:41:28 PM UTC+1, ProLoser wrote:

I figured it out! Check it out: http://jsfiddle.net/ProLoser/nTzRA/

Had to leverage some callbacks in TinyMCE to forcibly update the <textarea> (which apparently occurs right before save only) and also manually trigger the change event so that AngularJs is aware of the change and updates the data accordingly.

There's a small bug when I added <a ng:click="boxes.push({name:'new'})>Add New</a> however. Not sure why. If someone could take a look would be appreciated!

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/863NQGrnZS8J.
To post to this group, send email to ang...@googlegroups.com.

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Matthias Andrasch]

I tried to update this to 1.0.0rc10:

http://jsfiddle.net/programmieraffe/kjsEV/

I think I need an accessor or data-binding, but I'm not exactly sure how to solve this.

Help appreciated, thanks in advance!

[Matthias Andrasch]

Hm, I tried with setTimeout, but this does not work for me either:

http://jsfiddle.net/programmieraffe/kjsEV/ 

On Friday, June 8, 2012 1:07:20 AM UTC+2, ProLoser wrote:

Dammit. I had a similar problem for my Select2 plugin when I ported it to 1.0. It appears the triggers for change and updates being reflected into ng-model keep breaking. My coworker found a strange workaround that I'm not too happy with. I really with the core team would chime in on this one.

BTW: you may also need to do timeout(0) before initializing TinyMCE. I found out (in 10.5) that the way templating worked, when a new DOM object was injected before the entire page's template was finished compiling it would mess up the order and Angular would start losing its references to the proper DOM elements. The timeout allows the plugin to be binded after angular's compiler finishes. This too is a poor hack, and slow-to-compile pages would still throw errors.

[Matthias Andrasch]

So, I got it working for 1.0.0:

http://jsfiddle.net/programmieraffe/kjsEV/

The binding for ng-model attributes is a bit different, because 'controller' parameter of the linking fn is the model. I don't know if there are any restrictions on the implementation, but for now it works. At least in the fiddle. ;)

Related threads:

https://groups.google.com/forum/?fromgroups#!searchin/angular/directive$20model/angular/odcpnPa0R2k/r48ov-D2YFgJ

https://groups.google.com/forum/?fromgroups#!searchin/angular/scope$20ngmodel/angular/WDEsUD5eYck/TLv3XXmv-ZcJ

Cheers,

Matthias

[Dean Sofer]

Matthias: That is AWESOME!

I was actually planning to come back around and fixing this myself, but it seems you managed to work it out.

You should help us with more of the angularUI suite, do you think you can issue a pull request with this fix?

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/b1fpKH6e3-wJ.

To post to this group, send email to ang...@googlegroups.com.

To unsubscribe from this group, send email to angular+u...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Vojta Jína]

Very nice Matthias, this is correct solution, you don't need setTimeout.

I will try to explain how can Angular's compiler be confused :-D

Check out this fiddle http://jsfiddle.net/vojtajina/8yzbZ/, to see how compiler traverse the DOM, it's depth first search, at first "compile" whole structure and then "link".

The default link function is post (so if you specify just link function, it's post).

The compile phase is compileNodes() function:

https://github.com/angular/angular.js/blob/master/src/ng/compile.js#L373

Important thing is that compiler access nodes through indexes.

Basically, you can change the DOM structure during compile:

- you can do anything you like with your children (add nodes, remove nodes, reorder, add/remove directives, whatever you want).

- you can do anything with siblings below you (those who were not compiled yet)

- you can't change siblings who are above you (those who were already compiled)

- you can't change parents

So, example from my fiddle, in child1 compile function, you can:

- do anything with the content (child1a, child1b)

- append new nodes after child1

But you can't prepend nodes before child1!

In linking function, you should in general not manipulate the structure.

You can manipulate anything that has already been linked (eg. in post link, you can manipulate your children), however Angular won't notice that.

That might be actually desired sometimes - eg. if you are wrapping some jq ui component. You basically tell angular to ignore the whole content of your element and let jq plugin do all the stuff and you only communicate with it, but Angular does not bind inside the jq ui component.

If you need to manipulate the structure in link phase (or as a result of some watcher), you probably want to compile it on your own. That's for example something that ng-repeat does. It terminates the main compiler pass, so that content of ng-repeat is ignored - not compiled. It gets $compile injected and compiles the content on its own.

Hope this helps a bit.

V.

On Sat, Jun 16, 2012 at 5:26 AM, Matthias Andrasch <matthias...@googlemail.com> wrote:

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

[Dean Sofer]

You forgot to include tinymce

On Tue, Jul 3, 2012 at 6:55 PM, Sim <sbut...@gmail.com> wrote:

Guys,

I was trying the code on a simple page and but seems to throw an error. I have attached the file, any thoughts on what could be wrong?

Object [[object HTMLTextAreaElement]] has no method 'tinymce' 

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/angular?hl=en.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/xmfS0kE57KIJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.