kennethcachia / background-check

Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.
http://kennethcachia.com/background-check/
MIT License
3.27k stars 283 forks source link

Support for AngularJS #41

Open gregdeane opened 9 years ago

gregdeane commented 9 years ago

Hi, I'm attempting to use your plugin within an Angular application. It seems that no matter what I try, I am unable to instantiate your plugin without first wrapping it with an Angular $timeout (without the $timeout, I receive this error: Elements not found <ul ob-background-check="" class="ob-nav e2e-ob-nav ng-scope">).

I am instantiating your plugin inside a directive using the "link" method. This should mean that the DOM is ready. However, I still must use a $timeout to avoid the error above.

Any suggestions?

Thank you.

gregdeane commented 9 years ago

More detail: I am using a directive since the plugin manipulates the DOM. One of the issues is that for each element that I want Background Check to work on, I am adding the directive. This leads to a problem: Each time the directive is processed, Background Check is instantiated.

I need a way to instantiate Background Check a single time but only after all Angular processing is complete.

kennethcachia commented 9 years ago

Hmm. I'll look into this and will get back to you.

davidask commented 9 years ago

Any news on this? Can't seem to get this to work at all. My error is "Elements not found"

jonagoldman commented 9 years ago

Any news on this?

ghost commented 9 years ago

Very similiar problem here. Plus it seems, that using "BackgroundCheck" within a timeout only works in Chrome, not with Firefox.

I am using "BackgroundCheck" in a directive:

link: function() {
  $timeout(function() {
    BackgroundCheck.init({
      targets: '.target',
      images: '.blur'
    });
  }, 500).then(null);
}

The images I need to compare with the text, are "inline-styled" in a div:

<div class="blur" style="background: url('{{imgPath}}') no-repeat scroll 50% 50%/400%"></div>

It seems, that "BackgroundCheck" fires, even when the Images are not fully loaded. This causes the problem, so we have to use timeout (urgh). But I can not say, what the problem with the Firefox is. :-( Anyone else experiencing this problem? Any news or solution regarding the "timeout"-thingy?