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 281 forks source link

Support for AngularJS #41

Open gregdeane opened 10 years ago

gregdeane commented 10 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 10 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 10 years ago

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

davidask commented 10 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?