I like to post the video link on my website but that doesnot work
<div ng-repeat="vid in video">
<iframe class="embed-responsive-item" width="250px" height="250px" src="https://www.youtube.com/embed/+{{vid.youtube}}" frameborder="0" allowfullscreen></iframe>
</div>
The above code not working, please help.
You must use the ngSrc attribute as they say in the Angular documentation otherwise your browser tries to fetch the url with "{{vid.youtube}}".
Plus you don't need to add a "+", there isn't any on Youtube urls.
EDIT : I actually had the same problem with iFrames, and I forgot about it : you must tell Angular you "trust" the Url given. Take a look a this post, it's exactly the same problem.
Related
Bear with me please, because I am a N00b.
I am creating an Ionic app with Firebase and AngularJS.
What I am trying to do is have a map load with the address location drawn from the database. (Being hard-coded is not an option) I can do this as an external link like this:
See Location
and it works, but it opens up to the web page google maps (which isn't practical for an app)
So, I have tried embedding the map in an iframe like this:
<iframe
ng-controller="BrowseCtrl"
width="100%"
height="450px"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxxx" allowfullscreen>
</iframe>
but I can't get it to work. My guess is because the iframe is "outside" of the page and not recognizing the dynamic data. Does anyone know how I can load the address dynamically into an embedded map, or is there a better way to do this using AngularJS? Ideally, I would like to have all the functions available in the app itself, even if this means having to go to a payed service. For now, though, I am trying to simply embed the map.
Thanks in advance!
Update1
I haven't found the fix yet, but I think I found the problem. In the console there is an error saying: "a trusted value is required" and then links to this, docs.angularjs.org/api/ng/service/$sce I will have to read over this and get back
Update 2
I added this to the Controller:
$scope.trustedURL = $sce.trustAsResourceUrl("https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxx");
And changed the html to this:
<iframe
width="100%"
height="450px"
frameborder="0" style="border:0"
ng-src="{{trustedURL}}" allowfullscreen>
</iframe>
This fixed the error "a trusted value is required", but I am still getting the same result - a map with a randomly generated location. It's not recognizing the dynamically loaded data in {{}}. Any thoughts???
Try to use ng-src instead of src
<iframe
ng-controller="BrowseCtrl"
width="100%"
height="450px"
frameborder="0" style="border:0"
ng-src="https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxxx" allowfullscreen>
</iframe>
Use it like this:
<iframe
ng-src="{{ 'https://www.google.com/maps/embed/v1/place?q=' + task.street + ',' + task.city + ',' + task.zip + '&key=xxxxxxxx' }}">
</iframe>
Step 1
HTML Inside html use
[src]=methodToGetURL()
methodToGetURL: a function which return httl url from component file
EXAMPLE- iframe
[src]="methodToGetURL()" allowfullscreen /iframe'
Step 2) component file
Add DomSanitizer:
import {DomSanitizer} from '#angular/platform-browser';
function :
methodToGetURL() `enter code here`{
return this.domSanitizer.bypassSecurityTrustResourceUrl('https:Your URL here');
}
I am working on an Ionic project and via json I was able to readout my data in the view. But for some reason my image won't come through.
Here is a screenshot of my console:
As you can see from the picture the data is coming in correctly.
My html code:
<ion-list>
<div ng-repeat="newsItem in newsItems">
<a href="#">
<img ng-src="{{newsItem.picture}}" width="80" height="80">
<p>{{newsItem.name}}</p>
</a>
</div>
</ion-list>
Anyone has an idea why the image is not showing?
ok, first you jsfiddle is broken ! but no biggie, just remove ';' from the first line. Second your json news doesn't have a pictures it's just this ...
{"newsID":"58","name":"Chemicar presentation","idk":"new","kind":"news","picture":"58.jpg","picture1":"","start_time":"1446073201"}
You are binding to {{newsItem.picture}} and as you can see your picture it's there as a 58.jpg but this is not a picture it's just a string of picture name, so that's why it's not showing anything in the html!
(Perhaps I should have put this in a comment; totally going to get flamed)
I wonder if it could be a z-index issue?
i use ionic to build cross-platform app.
In out program we need load some post from server like: promotion/ news.
To achieve it, i use ng-bind-html:
<div ng-bind-html="inlineHtml|hrefToJS" style="padding:0px 10px 0px 10px">
I want to cached image in those post to client, that way my app can work offline have native mode, and smoothly.
i use: https://github.com/chrisben/imgcache.js/ to cached image
each time want to cached something , i just need add directives "img-cache" to img or div like this:
<div class= "ProductImage" img-cache ic-bg="{{$root.config.imgUrl+image}}">
</div>
But with inline html ( ng-bind-html above), i can replace all tag <img src = "" > in post to <img img-cache src = ""> but cached not happen, maybe directives img-cache not called.
I try to use $sce to set trust JS and html , but still can not solve problem.
Can you help me solve this case.
Many thanks!.
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>
I have some fotorama pictures and I want to get a link to an specific one. For example I'd like to go to the third image of the carousel with a link and not only to the first one. I guess I should use the .activeIndex but I don't know how to do it.
Thanks in advance!
This is covered in the fotorama documentation.
Just add the attribute data-hash="true" to the enclosing fotorama div element:
<div class="fotorama" data-hash="true">
<img src="1.jpg" id="photo_1">
<img src="2.jpg" id="photo_2">
<img src="3.jpg" id="photo_3">
... etc ...
</div>
and then link to them using the id attribute as a URL fragment identifier, e.g.:
http://example.com/my_gallery.html#photo_1
http://example.com/my_gallery.html#photo_2
http://example.com/my_gallery.html#photo_3
There are some examples you can play with here: http://fotorama.io/customize/hash/