search

bencevans / soyes

(WIP) A web-based controller for Sonos devices.
6 stars 1 forks source link

Error from Angular.js when trying to poll device images #4

Closed jhelmink closed 11 years ago

jhelmink commented 11 years ago

The images come through, but on initial page load, and every poll() event I get an error;

GET http://localhost:3000/device/%7B%7Bdevice.description.UDN%7D%7D/image.png 404 (Not Found)
bencevans commented 11 years ago

I'm not ever so familiar with Angular.js myself, have been using this project as an excuse to check it out so suggestions are very welcome if you find a good way to handle this.

I had a look a couple of days when trying to stop the images from flickering every 5 seconds. However unable to find anything obvious.

jhelmink commented 11 years ago

My guess on this is that the async $.getJSON calls to get the JSON aren't completing by the time Angular wants to render the results initially We might need to use a promise/deferred described here; http://docs.angularjs.org/api/ng.$q What do you think?

On Thu, Jun 6, 2013 at 9:43 PM, Ben Evans notifications@github.com wrote:

I'm not ever so familar with Angular.js myself, have been using this project as an excuse to check it out so suggestions are very welcome if you find a good way to handle this.

I had a look a couple of days when trying to stop the images from flickering every 5 seconds. However unable to find anything obvious.

— Reply to this email directly or view it on GitHubhttps://github.com/bencevans/soyes/issues/4#issuecomment-19072789 .

mob: 0774 74 27 141 www.agilemediaware.com

bencevans commented 11 years ago

I'm not entirely sure it is taking another look, it seems to me that before Angular.js has first kicked in the HTML is loaded with the text {{device.description.UDN}} in the src so heads off to get the image.

Angular.js then finishes loading/getting data from the $.getJSON calls and then repeats the HTML placing it in DOM and then replacing the variables. IE {{device.description.UDN}} to a valid piece of text.

Ideally we need a method that sets the src attribute without it pre-rendering without the variables swapped in. This might mean providing the templates separate to the initial HTML body and using JavaScript/Anguar.js to inject them into the DOM when it's ready :\

jhelmink commented 11 years ago

Yeah I see what you're saying, does that mean Angular is changing it back to {{device.description.UDN}} between polling events though? Because the error is triggered on every poll() timeout, but the DOM isn't being re-loaded

On Fri, Jun 7, 2013 at 4:19 PM, Ben Evans notifications@github.com wrote:

I'm not entirely sure it is taking another look, it seems to me that before Angular.js has first kicked in the HTML is loaded with the text {{device.description.UDN}} in the src so heads off to get the image.

Angular.js then finishes loading/getting data from the $.getJSON calls and then repeats the HTML placing it in DOM and then replacing the variables. IE {{device.description.UDN}} to a valid piece of text.

Ideally we need a method that sets the src attribute without it pre-rendering without the variables swapped in. This might mean providing the templates separate to the initial HTML body and using JavaScript/Anguar.js to inject them into the DOM when it's ready :\

— Reply to this email directly or view it on GitHubhttps://github.com/bencevans/soyes/issues/4#issuecomment-19113419 .

mob: 0774 74 27 141 www.agilemediaware.com

jhelmink commented 11 years ago

Found a solution using ng-src as the src for images. http://docs.angularjs.org/api/ng.directive:ngSrc new pull request coming soon

bencevans commented 11 years ago

Perfect!

Awesome :)

On 07/06/13 19:05, Josh wrote:

Found a solution using ng-src as the src for images. http://docs.angularjs.org/api/ng.directive:ngSrc new pull request coming soon

— Reply to this email directly or view it on GitHub https://github.com/bencevans/soyes/issues/4#issuecomment-19123240.