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
Related
I am using $scope to set the background image of a div tag in my html using inline styling.
This is my code:
<div class="banner" style="background-image: url('{{bannerImage}}'), url('images/generic.jpg')"></div>
The scope works fine but I get this error in my console.
GET http://localhost:9000/%7B%7BbannerImage%7D%7D 404 (Not Found)
Anyone have an idea what may be causing this?
You need to use ng-style instead since you are outputting an expression. Using plain style won't make Angular evaluate the bindings.
You can use ng-style. May be it can help.
I am trying to get an iframe to work with AngularJS, but I don't know why it wont load my iframe src.
I have some angular double bracket variables, that I want to put at the end of the iframe src, but when I do it, I get a error.
The iframe code looks like this:
<iframe name="deltager" src="http://someurl.com/somefile.php?id={{item.id}}" frameborder="0" style="width: 100%; height: 45px !important;" scrolling="no"></iframe>
It is the {{item.id}} that doesn't work.
I have tried to put a ordinary link, without the variable, and it works fine.
I tried to inspect the app with chrome inspect, and the error that i get is:
Error: [$interpolate:noconcat] http://errors.angularjs.org/1.3.13/$interpolate/noconcat?p0=http%3A%2F%2Fsomeurl.com%2Fsomefile.php%id%3D%7B%7Bitem.id%7D%7D
at Error (native)
at file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:37:417
at g (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:119:378)
at Pa (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:99:179)
at W (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:84:359)
at T (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:82:392)
at T (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:83:55)
at T (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:83:55)
at T (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:83:55)
at T (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:83:55)
Is there anyone who knows how I can get iframe src to work with angular variables.
Thanks in advance.
Have you tried using the ng-src attribute?
If the link is an external resource, you will need to configure the $sce service to trust the url.
<iframe ng-src="http://www.gravatar.com/avatar/{{item.id}}" ></iframe>
Html code,
<span style='cursor:pointer' data-ng-class='highlightedText:true'>Dheepan raju</span>
css,
.highlightedText{
text-decoration: underline;
}
Simple code. But the text is not underlined. Did I miss anything? Here is the plunker.
ng-class takes object as input. And you are passing it as plain text.
Your code should be
<span style='cursor:pointer' data-ng-class='{highlightedText:true}'>Dheepan raju</span>
Checkout your plnkr, there is angularjs 404 error also. Try changing angularjs source url.
Here is the updated plnkr.
ng-class has to be used like this
ng-class="{highlightedText:true}" and I think your angular script has some error, try copying angular CDN.
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.
I am displaying an image with ng-src:
<img style="width: 100px" ng-src="{{absolutePath}}customImages/{{currentBook.idcode}}.png"/>
which is found and displays fine, however in Firebug console, I am getting this error:
NetworkError: 404 Not Found - http://localhost/learntracker/customImages/.png"
as if this is being executed before the variables exist.
This HTML code exists inside a <div ng-cloak ng-app="mainModule"> and ng-cloak I understand to stop any executing before the variables exist.
Why is this error occurring and how can I suppress it?
Looks like you might be loading the data which populates currentBook object asynchronously. So during the previous digest cycle, ng-src directive would have rendered the src for the image with no value for currentBook.idcode and once it gets populated on the scope, another digest cycle runs updating the image. So the previous causes the 404. You could place an ng-if on the image.
ex:-
<img style="width: 100px" ng-if="currentBook.idcode"
ng-src="{{absolutePath}}customImages/{{currentBook.idcode}}.png"/>
You could see an small demo implementation here
But this seems to have been fixed with 1.3.x version of angular, in-order to prevent rendering of image src before all the interpolations are expanded to get values. Plnkr
ng-cloak is only helpful not to expose interpolation expression briefly while the angular is loading.
Some additional info (Courtesy #zeroflagL ) :
With angular version 1.3.x ng-src makes use of all or nothing interpolation (feature addition to interpolateProvider), meaning it will not expand the directive unless all the bound interpolations are resolved. You can see this mapping in the compile provider source.
ALL_OR_NOTHING_ATTRS = makeMap('ngSrc,ngSrcset,src,srcset'),
What you might want to do in this case is to actually have a function on scope that creates the ULR for the image path:
<img style="width: 100px" ng-if="currentBook.idcode" ng-src="getImagePath(currentBook.idcode)">
var absolutePath = 'somepath/';
$scope.getImagePath = function(idcode) {
return absolutePath + 'customImages/' + idcode + '.png';
}