i'm trying to write an AngularJS Directive that checks if a URL exist, if it does then it will display the image. Otherwise it will return nothing or a blank tag. Any advice would be appreciated, here's the fiddle I have so far, can't seem to get it to even read the url being passed in.
http://jsfiddle.net/stevenng/dXeap/8/
You will only be able to this with images on the same domain as it would violate cross-domain policy otherwise. If that is still ok then it should be possible by using AJAX to do a HEAD request and checking the HTTP status (e.g. 404) of the response.
I fixed up your code a bit so that it works. http://jsfiddle.net/LwpEP/1/
See how you get on from that starting point and come back here if you run into more issues.
Related
I am trying to use plupload-angular-directive in my Angular SPA. The problem is, the upload URL is not a constant and is generated on the server side every time I need to upload something.
So, as mentioned in the docs I have used the pl-url directive to set the URL on the front-end like this:
<button pl-upload=""
pl-auto-upload="true"
pl-files-model="multiFiles"
pl-url="{{imgActionUrl}}"
pl-progress-model="percent">Upload Images</button>
where, the imgActionUrl is fetched by my Angular controller and assigned to the $scope.
Debugging the application clearly showed that the URL is being properly set but even then, when the upload actually happens, it makes a POST to /upload.php rather than to the address mentioned in the directive.
Why is this happening?
After a lot of digging around, I posted an issue on the github page of the project:
https://github.com/sahusoftcom/plupload-angular-directive/issues/43
But it seems nobody is maintaining this repository and the owner redirected me to another library, jQuery-File-Upload.
I am using with ui-route by the way
But I want to create something useful for all the site
That every time there is a request to the server
the icon will appear
You can do this a number of ways. Write an angular service that you call inside every request that sets a variable to true when a request goes out, and false when the response comes back. Then attach an ng-show to an element with the icon set to the variable.
Also you can look into the $http interceptors, which might prove useful as then you would not have to call the service for every request manually. Downside, it would trigger on every request which may not be the desired effect.
I'm trying to use angulars $http, with both a cache and an interceptor.
The quick question:
Currently when angular gets the answer from the server, it first caches it, and then it passes it through the interceptor.
Is it possible to force angular to first pass it through the interceptor and only then cache it?
The long issue:
The server responds every call with a format similar to:
{permission: BOOL, data:[...]}
In the interceptor response I check the permission, and if correct I throw it away and pass only the data field to the application level. If it fails I reject and popup an error, etc... (Maybe I should do it in a transformResponse function, but I'll endup facing the same issue).
Then for some API calls I'm requesting a bunch of resources like that:
/resource/ALL
And it obviously caches this request and answer, but what I want to do next is fake caching every resource that I received.
So forthcoming calls to /resource/{some resource id} are already cached, cause I've already received it in the call where I requested ALL.
The problem I'm facing is, when I want to fake cache, on the application level, I lost the "{permission: BOOL" part, cause I've thrown it in the interceptor.
Some notes:
1- Of course I could also fake the permission part, and just hardcode it, but I feel it's not an option since if I later add / modify / remove metadata it's another place I've to look at.
2- An other way would be to don't throw the metadata on the interceptor / transformResponse, but again this is not an option since I don't want to select the 'data' field every time I call $http on the application level.
So I think the best option for me would be to cache after the interceptor, and not before.
Hope I made the issue clear, and any answer is welcome!
Is there a way to get the header of the current page in angularjs, without having to do a separate call? I can't find this in the docs anywhere, but it seems like it should be possible.
E.g. if the file index.html contains the angular code, how do I read the header of the initial request to get index.html? I could use $http to make the call again, but that seems unnecessary.
If you are not handling the http request you won't have access to the request or the response, unless the code that it's making the request exposes that information somehow, which is not the case. So, I'm sorry but the answer is no.
However, if I may: what is exactly what you need from the response header? Because there could be other ways to obtain the information of the headers (i.e. cookies)
I have an application running on angular and I already have an http intercept setup. My issue is that my api returns some 404 errors that I would want to redirect to a 404 page and some that I wouldn't. For example when navigating to a new page, if the content of that page returns a 404 I want to direct to a 404 page instead of loading an empty template. However on a page where a user is checking out (paying for a purchased item) I check to see if they have a credit card token stored on file. If they do we can offer them the choice to use it. If they don't have one on file the api returns a 404 and we ask them to enter one.
My issue is that because of these two cases, it's not as simple at calling $state.go('404') anytime a 404 is thrown. I'm weighing a few options. One, have the api return a special message if it should redirect to a 404. This seems less than ideal, not really the responsibility of the api and we have multiple clients on a shared api. I could try to detect the current state/page in the http intercept and create a list of states that should redirect. I could $rootScope.$broadcast('no-template-data') or something similar from each controller that needs this and redirect from an global app.run function.
Has anyone else faced this challenge with single page applications?