I want to set an image dynamically having the path of the image setted in a scope. The problem is that this is seen as a text, the value of selectedEvent.eventBannerImage is shown correctly, in my case the final url looks something like this:
background-image: url('/mydomain/images/banners\444b6e91-30fe-478b-a3d3-7984f0d35e69__1253402730_2873_full-269x300.jpg'), but it doesn't appear like a link as I need but just as a text. The image isn't shown.
<div style="background-image:
url('${pageContext.request.contextPath}/images/{{selectedEvent.eventBannerImage}}')">
please see here: http://jsbin.com/zehawu/1/edit
ng-style="{'background-image':
'url({{pageContext.request.contextPath}}/images/{{selectedEvent.eventBannerImage}})'}"
You will need to use a directive for the binding -- probably ng-style. Unfortunately, ng-style takes an expression, not a string, so you can't use concatenation inside of it.
<div ng-style="ctrl.bgImage">
// In the controller:
this.bgImage = {"background-image":
"url(" + this.pageContext.request.contextPath
+ "/images/" + this.selectedEvent.eventBannerImage + ")"
};
Related
I have 10 icons where each one for different types of alerts. I'm getting the type value from a service. I need to change the icon and style of text based on the type I'm getting from service. I'm using ng-src for changing the images.
<div ng-src="{{type=='0' : 'img1.png' : (type=='1' : 'img2.png' : ())}}"></div>
<div ng-class="{{class1: type=='1'}}">Some text</div>
Is there a better way to do this?
You can just set the icon img source in controller. Or even set the img source like:
$scope.iconSrc = "img" + type + ".png";
And use in template. Same login for class.
I'm having some issues with ng-style. Here's the code I have at the moment
ng-style="{'background-image': 'url(http://s3-us-west-1.amazonaws.com/'+ event.image2)'}"
The above isn't working, (I have had to remove the bucket name for reasons), but the code works if I have it like this:
ng-style="{'background': 'orange'}"
This is displaying fine. Why is the URL method not working?
You can write like this instead on the element:
<div style="background-image: url('http://s3-us-west-1.amazonaws.com/{{event.image2}}')"></div>
I guess event is a variable in your scope, in that case it's just a small typo:
ng-style="{'background-image': 'url(http://s3-us-west-1.amazonaws.com/' + event.image2 + ')'}"
I have an ng-src attribute within an image tag that is loaded as a string from the template property of a directive, which supposed to load an image selected by the user. However when the page loads, the console outputs a 404 since there is no image selected and ng-src is loading an empty image. What I currently have is this
"<img ng-src="myserver.com/{{imagesPath+ selectedImage}}"></img>"
but whenever selectedImage is an empty string I get the empty request.
What I tried changing it to was
"<img class='snapshot' ng-src='{{selectedImage.length? \'myserver.com\' + imagesPath +selectedImage : \'\' }}'></img>"
And this does not work. What is the correct syntax?
I had the same problem, using the ng-if solved it (Thanks for that!!). Although I had to change the way that the string is concatenated inside the ng-src:
ng-src="{{'myserver.com/'+ imagesPath}}"
You should check selectedImage.length> 0, so that whenever there is selected image found it will create an src path
"<img class='snapshot' ng-src='{{selectedImage.length> 0 ? \'myserver.com\' + imagesPath +selectedImage : \'\' }}'/>"
Better way would be hide that img tag from html when there is no image using ng-if directive.
"<img ng-if="selectedImage.length > 0" ng-src="myserver.com/{{imagesPath+ selectedImage}}"/>"
Is there a way to prevent flicker for templates that contain concatenated values such as {{person.LastName+ ", " + person.FirstName}}?
I don't want to see the "," until $scope.person is bound.
Is this something that I might put into a filter? Would you create a filter for something this trivial?
You can use the ngCloak directive for that. From the docs:
The ngCloak directive is used to prevent the Angular html template
from being briefly displayed by the browser in its raw (uncompiled)
form while your application is loading. Use this directive to avoid
the undesirable flicker effect caused by the html template display.
You can simply use ng-show for this.
I've created a demo to show the results.
http://plnkr.co/edit/ZAC8RzagPYmLHgXcPazW?p=preview
I'm using a timeout of 2 seconds in the controller so you can see the flicker if you remove ng-show.
You can use "ng-bind" attribute in your wrapper tag so instead of this:
<span>{{person.LastName+ ", " + person.FirstName}}</span>
You can do this:
<span ng-bind="person.LastName + ', ' + person.FirstName"></span>
This will change the tag text only when the value is properly concatenated.
Had some issues with ng-cloak so i resorted to using plain old css:
<div class="digits" style="display:none;">
And on the controller:
document.querySelector('.digits').style.display = 'block';
This happens because you're loading your angular js lib not from the <head></head> section. If it's not a big deal to you, just move your angular <script> tag in the head and it should stop flickering.
I am trying to give my div dynamic style - I want the css to come from the controller , where the css object the controller returns isn't hard-coded but changes dynamically(I need a 'top' field which is a variable). I am using ng-style to try to achieve this :
-html-
<div id="preview" ng-style="setTopPosition()">
-controller-
$scope.setTopPosition = function() {
console.log("top position: " + $scope.topPosition);
var retObj = { top : $scope.topPosition , background: "green" };
console.log(retObj);
return retObj
};
Now I know that the values I'm expecting ($scope.topPosition etc) are there(they show in console log) , and I know the controller is running it's code since the div's background turns green . However , the top position part is not working . Can't ng-style use objects with variable fields ? Also , does this need to be in a custom directive instead ?
Remove braces from ng-style="setTopPosition() if you want to use it as variable.
It should be ng-style="setTopPosition
in controller, as example:
$scope.setTopPosition= {
top : $scope.topPosition+'px',
background : "green",
"width": 0 + '%',
"height": 5 + 'px'
};
on any change you just set new values to $scope.setTopPosition= {/* ... */}
In case anyone else comes across this question like I did, the problem for me came after upgrading from Angular 1.2.x to Angular 1.3.x.
After upgrading, it actually failed when I manually added 'px':
<span ng-style="{top: spanTop + 'px'}">I (don't) have top!</span>
and it started working when I removed the 'px':
<span ng-style="{top: spanTop}">I have top!</span>
Unless you are using jQuery with angular you must provide the px part of the value. jQlite doesn't support advanced CSS stuff like jQuery does so you should do this.
top : $scope.topPosition + 'px'
Note: The reason I say that is because the styles are applied normally in the ng-style directive like this: element.css(styles);