Rich-text Reply

AngularJS overriding jQuery manipulation in a variation

avanwart 10-16-14

AngularJS overriding jQuery manipulation in a variation

[ Edited ]

I'm using a Manual Activation code snippet within Angular to activate a simple button text test.  When the page loads, Angular does its thing to render the page, the activation snippet then fires and the button text changes correctly.  However, whenever a user interacts with the button, which has an on/off state, the button text changes back to the original text from before Optimizely is activated.  I believe this is related to Angular's two-way binding technology, but I'm not completely sure.  

 

In order to change the button text, initially, I am using jQuery:  $('.button-class').text('my text change');  This works correctly on DOM ready, but again, once the button is clicked the text reverts back to what it was before optimizely is activated.

 

In looking into this more, it was suggested that I use more jQuery to bind my text change to the button click.  I have tried several different methods.  The one that seems to partially works is .delegate().  The code I've been using looks like this:

 

$('.parent-div-class-of-my-button').delegate( '.button-class', 'click', function() {
     $(this).text('my text change');

     alert('click');
});

 

When the code above fires, the button briefly changes to 'my text change' and I use an alert to see this.  But when I dismiss the alert, the text reverts back to the original button text.

 

Can anyone help me with this issue?  AngularJS has proven to be quite challenging to manipluate with jQuery.

Level 1

Re: AngularJS overriding jQuery manipulation in a variation

Hi @avanwart,

 

It appears your issue may be related to the much more specific scoping/context AngularJS employs, especially in regards to click events.  I found some background/code samples on this here, here, and here.

 

It appears the last code sample may be the most succinct and the most valuable.  Essentially, the button and ButtonText can be defined to have separate scope, and the code has to address both of them as the button is clicked and the save() function is invoked.

 

Perhaps you could research how your implementation of AngularJS is assigning scope to the different events/elements tied to your button?

Harrison Krat
Solutions Architect | Optimizely, Inc.
harrison@optimizely.com