Rich-text Reply

How can I pass optimizely variable to Angular JS directive?

bigappleinsider 06-24-15

How can I pass optimizely variable to Angular JS directive?

For example, I have 

<articles-feed optimizely-is-trending="true"></articles-feed>

 

I would like to set optimizely-is-trending to variable passed by optimizely. Is it possiblle? If not, can I make optimizely pass a global variable and make optimizely script run before angular module runs?

 

I have tried passing global variable, but it didn't work because angular module was executing prior to optimizely.

 

Can you suggest a solution or any documentation on the topic?

 

Thank you

Shaunak 06-24-15
 

Re: How can I pass optimizely variable to Angular JS directive?

Hello,

I would recommend moving Optimizely above the angular module and ensure that it executes first, that way you should be able to pass a global variable.

Let me know if that helps.

Best,
Shaunak Mali
Solutions Architect | Optimizely
Optimizely

Re: How can I pass optimizely variable to Angular JS directive?

Unfortunately that doesn't solve my issue. We load Opimizely script before we load any other scripts. Can you suggest other things I can try?
moravemj 06-26-15
 

Re: How can I pass optimizely variable to Angular JS directive?

Hey @bigappleinsider,

 

Are you setting the variable in your directive? If your Angular script is running after the Optimizely script, you should be able to insert the following in your directive 

 

 

.directive('articlesFeed', function() {
  return {
    templateUrl: 'my-directive.html',
    link: function (scope, element) {
      scope.optimizely-is-trending = window.optimizelyVariable;
    }
  };
});

 

Happy Friday!

 

Matt

Optimizely

Re: How can I pass optimizely variable to Angular JS directive?

that exactly what I tried, but I could not get it wokring. console log for window.optIsTrending displays undefined. When I type window.optIsTrending in the console after page is loaded, it displays "true"

 

We include optimizely script in the head, angular modules and other libs are loaded in a single minified file right before body closing tag.

 

Is there anything I could do to force optimizely to execute prior to angular? Or maybe there is a way to make angular wait until optimizely loads. Can you suggest other ways to make angular work with optimizely?

 

Thank you

moravemj 06-29-15
 

Re: How can I pass optimizely variable to Angular JS directive?

Hey @bigappleinsider,

 

Here is another idea: Let's use a setInterval to watch for the window.optIsTrending variable to become available and then re-render the directive when it is. The comments in the code below are more easily read in a text editor such as Sublime Smiley Happy

 link: function(scope, el, attrs) {
		var intCounter = 0;
		myOptyInterval1 = setInterval(function() {
			if (window.optIsTrending != undefined) {
				//Set the scope variable
				$scope.optIsTrending = window.optIsTrending;
				//$apply runs $digest again to update all viewable states for the directive
				$scope.$apply();
				// leave this clearInterval
				clearInterval(myOptyInterval1);
			} 
		       
			// Remove below this block for no timeout
			// This part just increments the counter. You most likely won't need to modify this.
			else if (intCounter < 100) {
				intCounter ++;
			} 
			// This code will execute if the interval has ran 100 times. Put any essentional code inside the "{}" (e.g. Body hide removal for flashing fix).
			else if (intCounter >= 100) {
				// leave this clearInterval
				clearInterval(myOptyInterval1);
			}
			// Remove above block for no timeout

		}, 50);
  }

 

The code will clear the interval after 5 seconds or if the optimizely variable is set. Let me know if any of this is unclear.

 

Thanks,

 

Matt

 

Optimizely