"https://maps.googleapis.com/maps/api/staticmap?size=440x420&scale=2&style=feature:all|element:labels|visibility:off&markers=color:green|size:small|90,-180"
So I have something like the link shown above. That link doesn't quite work, all I did was shorten it down to 1 coordinate and using a possibly not correct coordinate.
BUT, you should get the idea. Should I be able to instead do something like this:
<div id="mapWrap" ng-controller="EdwardMap">
<img src="https://maps.googleapis.com/maps/api/staticmap?size=440x420&scale=2&style=feature:all|element:labels|visibility:off&markers=color:green|size:small|{{building.mapcoord}}" usemap="#Map">
I have attempted it and I cannot get it to work. I have other code below it that uses the same controller and is working fine, but I was hoping that Angular could help me generate the image! And incase you think something is wrong with my image link, the one I am using is otherwise working perfectly, it just has more coordinates and other goodies. I took one of them and replaced it with {{building.mapcoords}}.
Here is where building.mapcoords is coming from:
$scope.building = [{
name:"name2",
mapcoords:"80,-170",
address:"address2",
htmlcoords:"556,69,565,72,568,75,568,85,564,92,559,100,557,108,554,98,550,92,546,86,546,76,552,69",
},{
name:"name1",
mapcoords:"",
address:"address1",
htmlcoords:"699,270,708,274,710,277,710,285,707,291,702,300,699,308,696,300,693,292,689,287,688,276,694,271"
}
Thanks!
Try to use ngSrc Should work fine, because you make another request to the url, think of it as just a resource, a different image
Related
I'm a beginner with Angular and I want to make a ng-repeat of images in a folder. All my images have different names so I don't see how I can make a ngSrc for all the images.
Hope I am clear enough.
You can try something like this.
Grab all the image filenames and store it in a javascript array with in the javascript for your controller. I'm assuming you would be doing this on your server side and return JSON back to client through an API or Service.
In you controller, the result would look like this.
$scope.myImages = ["image1.jpg", "image2.jpg"];
You have many options now. One way is to write a little function that returns the full path and call it from ng-src.
$scope.getImagePath = function(imageName) {
return "http://yoursite/location/" + imageName;
};
<div ng-repeat="myImage in myImages">
<img ng-src="{{getImagePath(myImage)}}"/>
</div>
Similar post here
Try to give some code snippets using JSFiddle or Plunker next time as it would clearly show what you are trying to do.
[Update]
I don't know what language/framework you are using on the server side but to get all the files in a directory is very easy. Below are examples using node.js and C# respectively.
http://www.csharp-examples.net/get-files-from-directory/
How do you get a list of the names of all files present in a directory in Node.js?
If you are using ASP.NET WEB API, then just return the array back from the Get method in your API Controller, and then call that API from Angular directly.
There are tons of examples on how to do this. Just do some research and you should be fine.
Here’s what I’m trying to do while testing an Angular app with Protractor. I would like to get a certain element, which is somewhat like this:
<div class="someClass">
<p>{{textFromBoundModel}}</p>
</div>
then get its html, and check whether it contains the text that I expect it to have.
I tried to get this element first by the cssContainingText method, but it didn't quite work (not sure why; maybe because the text within the paragraph is produced dynamically). So now I’m getting this element using just the by.css locator. Next, I'm checking whether it contains the text I’m testing for:
// this is Cucumber.js
this.Then(/^Doing my step"$/, function(callback){
var el = element(by.css('.someClass'));
expect(el).to.contain("some interesting string");
callback();
});
});
but this doesn't work. Problem is, el is some kind of a locator object, and I can’t figure out how to get html of the element it found in order to test against this html. Tried .getText(), with no success.
Any suggestions?
Does:
expect(el.getText()).to.eventually.contain("some interesting string");
work?
I believe you need the .eventually to wait for a promise to resolve, and you need the .getText() to get at the content of the div.
See the chai-as-promised stuff at the head of the cucumber sample.
Try the below solution worked for me
Solution 1 :
expect(page.getTitleText()).toContain('my app is running!');
Solution 2 :
expect<any>(page.getTitleText()).toEqual('my app is running!');
I'm having trouble running enter animation first time the page is loaded. I think this is an old problem having to do with this issue.
You can see my problem here.
The strange thing is that when I put the templates in seperate files (and not as text/ng-template) the animation works flawlessly as you can see here.
Since my application will work on file URI scheme I have to use text/ng-template.
Any workarounds? I couldn't find one that fits.
I was able to fix the issue with the dirty hack down this page.
Added ng-if to my ng-view's container
<div ng-if="true" ng-view></div>
along with:
$rootElement.data("$$ngAnimateState").running = false;
in my first controller.
And here is the working demo.
Thank you.
All I am trying to do is include an anchor tag inside the html of a partial that links to an external site. Were this standard html, the code would simply be:
google
As simple as this is, I cannot seem to find a working solution for getting past angular intercepting the route (or perhaps replacing my anchor with the https://docs.angularjs.org/api/ng/directive/a directive unintentionally?).
I have scoured SO and the rest of the web and seen a myriad of solutions for dealing with: links within the same domain, routing within the SPA, routing within a page (ala $anchorScroll) but none of these are my issue exactly.
I suspect it may having something to do with using $sce but I am an Angular n00b and not really sure how to properly use that service. I tried the following in my view controller:
$scope.trustUrl = function(url) {
return $sce.trustAsResourceUrl(url);
}
with the corresponding:
<a ng-href="{{ trustUrl(item) }}">Click me!</a>
(as described here: Binding external URL in angularjs template)
but that did not seem to do the trick (I ended up with just href="{{" in the rendered page).
Using a plain vanilla anchor link like this:
google
also failed to do the trick (even though some online advised that standard href would cause a complete page reload in angular: AngularJS - How can I do a redirect with a full page load?).
I also tried adding the target=_self" attribute but that seemed to have no effect either.
Do I need to write a custom directive as described here?
Conditionally add target="_blank" to links with Angular JS
This all seems way too complicated for such a simple action and I feel like I am missing something obvious in my n00bishness, at least I hope so because this process is feeling very onerous just to link to another url.
Thanks in advance for any solutions, advice, refs or direction.
It turns out that I did in fact have all anchor links in the page bound to an event listener and being overridden. Since that code was fundamental to the way the page worked I did not want to mess with it. Instead I bypassed it by using ng-click to call the new url as follows:
HTML:
<a class="navLinkHcp" href="{{hcpurl}}" title="Habitat Conservation Plan" target="_blank" ng-click="linkModelFunc(hcpurl)">Habitat Conservation Plan</a>
Controller:
$scope.hcpurl = 'http://eahcp.org/index.php/about_eahcp/covered_species';
$scope.linkModelFunc = function (url){
console.log('link model function');
$window.open(url);
}
And voila! Good to go.
Thanks again to KevinB for cluing me in that this was probably the issue.
I have no idea, how to explain this properly, but i try my best.
I have worked with flowplayer in jquery mobile (with multipage).
I have about 20 video sourced from database.
Now the problem:
I don't want all the videos start loading, when i start the video.
I have tried to make javascript to start correct video with '' tag, but it needs two clicks to start video.
Here is link i'm using (sorry, some forms are in finnish) http://www.rakentaja.fi/test/mobv/3mobvid.asp
Don't bother to go in front page, because i haven't finished those sites.
just pick any of the links and watch what happens.
Please, use google chrome, it's only browser which is the only one what works.
Thank you!
Avoid using inline Javascript functions, do it this way.
$('a.ui-link').on('click', function() {
aloitavid(61,'Valloxsuodpuhdvaihto');
});
Since each link has different parameters; you need to add those to the <a> link attributes and then pull them to be used in your function.
Update
You could do the below. Save video parameters as an attribute vlink, then read parameters and pass them to your function aloitavid(). Example here.
HTML
start video
Code
$('a.ui-link').on('click', function () {
var vlink = $(this).attr('vlink').split(",");
var value1 = vlink[0];
var value2 = vlink[1];
aloitavid(value1,value2)
});
This results
value1: 60
value2: Valloxyleistailmanvkoneenhuollosta
Try to put links to hardcoded
Back
if it's posible.
That won't be nice, but it works.