I am not sure why but I am trying to make an image button and the URL's come from getting a JSON object in my controller, but what ever the link is through an error, and if I change it to works fine!!!
Controller:
$scope.iconImage = 'http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png';
HTML:
<!-- Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. -->
<input type="image" ng-src="{{iconImage}}" />
<!-- This works fine -->
<img ng-src="{{iconImage}}" />
You might use the Strict Contextual Escaping (SCE) mode to marked the URL as a safe content source.
See trustAsResourceUrl(value);
Inject [$sce] in your controller and then use it like this:
$scope.iconImage = $sce.trustAsResourceUrl('http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png');
You can white list the URL using the $sceDelegateProvider. See here.
Related
In my template I have something like the following:
<img data-ng-if="$ctrl.shouldShowFacebookPixel"
src="https://www.facebook.com/tr?id={{$ctrl.facebookPixelId}}&ev=PageView"
/>
When I load the page I can see in my dev tools a request is made to
https://www.facebook.com/tr?id={{$ctrl.facebookPixelId}}&ev=PageView
Then a bit later a request is made to the correct URL after the variable has been substituted.
https://www.facebook.com/tr?id=blah&ev=PageView
How can I stop the initial request before variable substitution has happened?
Go for ng-src instead src:
<img data-ng-if="$ctrl.shouldShowFacebookPixel"
ng-src="{{'https://www.facebook.com/tr?id='+ $ctrl.facebookPixelId + '&ev=PageView'}}"
/>
Angular needs to compile the URL, and your browser has no clue what is {{/* ... */}}. This is a reason why you see
https://www.facebook.com/tr?id={{$ctrl.facebookPixelId}}&ev=PageView
I am getting iframe url from server. after i receive that, i am setting to `iframe' as like this:
<iframe ng-src="{{video}}" frameborder="0"></iframe> //without quote
But not working at all. in case if I hard-code the same value it's working fine. even i have tried like this:
<div class="content">
{{video}} //i am getting path correctly
<iframe ng-src="{{'video'}}" frameborder="0"></iframe>
</div>
what is the issue here?
I am gettting this error :
http://errors.angularjs.org/1.4.9/$interpolate/interr?p0=%7B%7Bvideo%7D%7D&p1=Error%3A%20%5B%24sce%3Ainsecurl%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.9%2F%24sce%2Finsecurl%3Fp0%3Dhttp%253A%252F%252Flivecam.mktimelapse.com%252Fkhalifa-stadium2
This happens because of security policy imposed from angular 1.2.
Try to make your link trustable
Like this
add module ngSanitize
var app=angular.module("app", ['ngSanitize']);
then inject $sce in your controller
function MyController($scope,$sce) {
Then make your link trustable
$sce.trustAsResourceUrl(video);
DEMO
I am binding the background url css property in this way:
<div class="ng-cloak" style="background-image: url({{image.url}})"></div>
all the images are loaded correctly but in the console I have:
GET http://localhost:8100/%7B%7Bimage.url%7D%7D 404 (Not Found)
even if I use the class ng-cloak.
Does someone know how to avoid this error and this bad request?
Try to use ng-style instead because angular will not check none ng-*
https://docs.angularjs.org/api/ng/directive/ngStyle
How can I show a spinner or loader gif animation while route is changing from one to another.
I am using ng view like as follows:
<div ng-view class="view-animate">
</div>
I am loading templates from server and also inline. While the HTTP request is pending I need to show the spinner/loader... any snippets?
You can show and hide the loader when location change starts and is completed, respectively.
Here is a plunkr that I have created for this situation. This uses ui-router and is taken from one of the apps that I have created, so it may not be useful as-is, but it will give you an idea on how to approach the problem.
HTML Code inserted below just to keep SO happy...
<ui-view class="view"></ui-view>
<div loader="" class="ng-hide"></div>
I hope it helps.
Abhi.
I am wondering if it's possible to assign a result of a function call to an ng-src in an image?
Basically, I need to retrieve a set of thumbnails for a set of data from an aspx page, there may or may not be a thumbnail. So I need to show a different preset image for a case when there is nothing returned from the thumbnail page.
Something like this:
<img ng-src="getThumbnail({{ item.Id }})" />
Where getThumbnail is a function which makes a http request to a url such as
http://localhost/Srv/getThumbnail.aspx?id=111
I've tried this but Angular is producing this:
<img ng-src="getThumbnail(111)" src="getThumbnail(111)">
Instead of calling the function. Is there a better way for doing this?
I've commented on your question but I'll offer my suggestion as a solution after looking at the AngularJS documentation. The ng-src directive will correctly set the src attribute of img. This directive can contain Angular expressions and these can call functions contained in your controller and reachable in the current scope. Hence instead of:
<img ng-src="getThumbnail({{ item.Id }})" />
Try this:
<img ng-src="{{ getThumbnail(item.Id) }}" />
In the former declaration, the function isn't available to the Angular scope, but it is in the latter. (If I am not mistaken, as I haven't tried the code myself).
Make sure the getThumbnail function is in a controller that is reachable to the current scope.