I'm new to AngularJS and I'm trying to retrieve an image link from Google Firebase that is put in a scope variable. This works when I perform the retrieval of the URL in an action using a different controller before this one loads it. However, when retrieving it in this controller, my div somehow doesn't want to display the image. I've checked with a simple ng-bind whether the scope variable is updated, and it is. However, the picture div in the view stays empty. Does anyone know how I can get my view to display the image?
Controller:
$scope.profilepicture = null;
var storageRef = firebase.storage().ref();
var path = "profilepictures/" + userFactory.getUser().uid + "/profilepicture";
var profilePicRef = storageRef.child(path);
profilePicRef.getDownloadURL().then(function(url) {
$scope.$apply(function(){
$scope.profilepicture = url;
});
}).catch(function(error) {
});
View:
<div ng-click="getImage()" ng-style="{'background-image' : 'url({{profilepicture}})'}" style="width:100px; etc...></div>
ng-style="{'background-image' : 'url(' + profilepicture + ')'}"
I've just found the issue. The ng-style url needed to be written like this: ' + value + '
Thanks for your help :)
Try like this by removing braces from there, but just make sure you are getting a right value of profilepicture.
<div ng-click="getImage()" ng-style="{'background-image' : 'url(profilepicture)'}" style="width:100px; etc...></div>
Related
I am trying to access or make a parameter value which was passed via an <a> visible within another javascript file. I can't figure out how to go about it.
I have the ff. line of code which goes to a new page: student_learn_topiclink.php everytime the link is clicked
var topicLink = $('<a>' + topicTitle+ '</a>').addClass('topic_link').attr('href','view/student_learn_topiclink.php?topicId=' + topicId).attr('target','_blank');
This is what shows in the address bar after clicking the topicLink
http://localhost/cai/view/student_learn_topiclink.php?topicId=5
I want to use the value 5 in student_learn_topiclink page's JS file.
How can I expose or make the topicId = 5 visible in student_learn_topiclink JS file?
In student_learn_topiclink.js, I'd like to do something like this,
$(document).ready(function(){
alert(topicId);
});
See this thread about retrieving URL parameters with javascript. For your specific example, try the following:
var url_string = window.location.href;
var url = new URL(url_string);
var topicId = url.searchParams.get("topicId");
console.log(topicId);
Example fiddle: http://jsfiddle.net/craftman32/yxrvbcun/1/
You can use like this :
var topicId = window.location.search.split('topicId=')[1];
console.log(topicId);
Is there a way to use a variable in Google Scripts HTML Code? Right now I have:
var activeUser = Session.getActiveUser()
app.add(app.createHTML("<h1>Hello, activeUser </h1>"));
This doesn't work. Is there a way to make this work? Thanks!
Do you mean something like this?
var activeUser = Session.getActiveUser()
app.add(app.createHTML("<h1>Hello, " + activeUser + "</h1>"));
I am using the Google maps API v3 to create a portfolio.
Question :
Is there a way to generate the default image link, that would work on every google server, or a way to know what server is used so I can generate the link accordingly ?
Here is an example of what I'm currently doing. It may or may not help you finding an answer
User path :
The user enters the address of his business.
An iframe is displayed with the interior view of this business
The user can navigate on this iframe to select his default picture
From the view selected with the iframe, I can create an image URL directly from the Google servers that I set as default image.
At the moment, this URL can be (JS):
var image = "https://geo3.ggpht.com/cbk?panoid=" + panoId + "&output=thumbnail&cb_client=search.LOCAL_UNIVERSAL.gps&thumb=2&w=689&h=487&yaw=" + povHeading + "&pitch=" + povPitch + "&thumbfov=" + fov;
or
var image = "https://lh5.googleusercontent.com/" + panoId + "/w689-h487-k-no-pi"+povPitch+"-ya"+povHeading+"-ro0-fo"+fov+"/";
This worked for a vast majority of the cases, but as more people are using the service, some special cases appeared (example link) :
https://lh3.ggpht.com/-1dwRgcXpyYk/WS7bUYtLEdI/AAAAAAAAObA/zd-aK-rfWxYvA302eg6WT7qQoEKRrUxGgCLIB/x2-y2-z3/p
I am saving the link for the both first cases but I have not found a general rule that can be applied.
The user that entered his business having this 3rd example link is getting a 404 img not found atm.
Here is the code I'm currently using, if it can help understanding the question (JS):
function generateImg() {
/* here I get all the vars used to create the image */
//generate img link
var image = "https://geo3.ggpht.com/cbk?panoid=" + panoId + "&output=thumbnail&cb_client=search.LOCAL_UNIVERSAL.gps&thumb=2&w=689&h=487&yaw=" + povHeading + "&pitch=" + povPitch + "&thumbfov=" + fov;
//if img does not exist
UrlExists(image, function(status){
if(status === 404){
// 404 not found
var image = "https://lh5.googleusercontent.com/" + panoId + "/w689-h487-k-no-pi"+povPitch+"-ya"+povHeading+"-ro0-fo"+fov+"/";
}
});
}
You can get the consistent result within the official API:
var image = "https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=" + panoId + "&fov=90&heading=235&pitch=10&key=" + API_KEY;
I am sending an email via javascript. In mail.parameter.text property I need to send the hyperlink. In the code below I am hardcoding the url whick looks very lengthy and also I need to add the /dashboard at the end of the url. Any idea on how to shorten the url?
var parent = space.getParent();
var siteGroup = "GROUP_EMAIL_CONTRIBUTORS";
var mail = actions.create("mail");
mail.parameters.to_many = siteGroup;
mail.parameters.subject="New Site Created in Community"
mail.parameters.text=" A new site called " + document.properties.name +"is created.Click http://pc1:8080/share/page/site/"+document.properties.name+"/dashboard"+" to join the site";
//execute action against a document
mail.execute(document);
Sorry if this is a basic question I dont know javascript. This is my entire script and I am not using any html tags in between.
You can change it to something like this, for example:
mail.parameters.text="Click <a href='http://pc1:8080/share/page/site/" + document.properties.name + "/dashboard'>here</a>";
Your link will appear as "here" and nevertheless lead to the URL you specified. Is that what you mean by "shorten the url"?
Please try now.
var url = "Click http://pc1:8080/share/page/site/" + document.properties.name + "/dashboard" + " to join the site";
ail.parameters.text = url;
I am trying to share variables between two html pages. I am only using javascript and HTML5 to develop a windows 8 app. Based on an image which a user clicks on one page, I want a div on a second page to be populated with that image. Any ideas?
When I click on the image, I am currently calling the following function:
function imageClick(url) {
//var id = parsed.ClientID;
//window.location= url + "?" + id
window.location = url;
}
Then in my html file, I have this line:
<img onclick="imageClick('pages/page2/page2.html')"
data-win-bind="src:image" style="width: 133px; height: 125.5px;">
I was thinking of getting that id in the next page's url (if I were to uncomment the commented lines above) but it's a bit hackky and I don't actually know how to go about executing the retrieval of that on the next page..
Is there a more efficient and easy way of doing this in javascript? Like an equivalent of sessions in php or something?
Javascript does not have session variables because it runs on the client side. You can use URL parameters and cookies in order to achieve the same results.
You can get the URL parameter by using this function:
http://ziemecki.net/content/javascript-parsing-url-parameters
Add the link to the image to the query part of the url when they click. Something like you had in the comment, assuming you don't have a query part already:
function imageClick(url) {
//var id = parsed.ClientID;
window.location= url + "?src=" + url.src;
//window.location = url;
}
The other page can use window.location.search to extract it, strip off the src=. The code would look something like this:
var src = window.location.search;
if (src.indexOf("src=") == 0) {
src = src.substring(4);
}
newPageImageElement.src = src;
Where newPageImageElement is the <img> where you want to display the picture on the second page.