I have the HTML below on my Ionic app:
<a ng-href="#/app/perfil/{{ notification.Notification.model_id }}">
<img ng-src="{{ notification.Notification.photo }}" class="profile-pic">
<h2 ng-bind-html="notification.Notification.name">{{ notification.Notification.name }}</h2>
<p ng-bind-html="notification.Notification.title">{{ notification.Notification.title }}</p>
</a>
As you can see, it set the user ID after loading a JSON file. This link works fine on a browser, but for some reason when I try on a real device, my xcode returns an error:
Failed to load webpage with error: The URL can’t be shown
All my data is being served on a HTTPs URL.
Any idea on how to fix that?
After some research, I've changed my ng-href to ui-sref and it worked - actually, ui-sref makes much more sense in this case.
If any one is having the same issue, please read more details here: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref
My code:
<a ui-sref="appPerfil.perfil-amigo({ user_id: notification.Notification.model_id })">
<img ng-src="{{ notification.Notification.photo }}" class="profile-pic">
<h2 ng-bind-html="notification.Notification.name">{{ notification.Notification.name }}</h2>
<p ng-bind-html="notification.Notification.title">{{ notification.Notification.title }}</p>
</a>
Related
<div ng-repeat="file in files" class="record-row">
<div class="colCell fileAttributes">
<div ng-if="!(file.thumbnail === '')" class="collCell-container thumbnail-container">
<img class="" ng-src="{{ file.thumbnail }}" />
</div>
<div class="collCell-container name-container">
<a class="name-container--filename">
<span ng-click="getFile(file.id,file.extension,file.fileName)">{{ file.fileName }}</span>
</a>
<div class="name-container--fileweight">
<span>{{ file.fileSizeByte }}</span>
</div>
</div>
</div>
</div>
Angular Version is 1.3.14. The Code worked fine (functions worked and all outputs) until I added ng-src="{{ file.thumbnail }}".
This gives me the error Unknown provider: urlattrFilterProvider <- urlattrFilter
. Even outputting {{ file.thumbnail }} as text outside of the attribute works fine.
Is this way not correct for setting the src of an image?
Just use src="{{file.thumbnail}}"
instead of ng-src="{{file.thumbnail}}"
Not an actual answer but might be helpful:
the Unknown provider:... error usually shows up when we are injecting something to an angular module the wrong way, eiher a mispelled dependency or a dependency injected in the wrong order.
Make sure the error is coming where you're expecting it from, you can just set a breakpoint on exceptions and confirm this.
I am developing a website where i used both django and angularjs. I want to know if it is possible to use the "image" object on my page after declaring it in my angularjs script as shown below.
<li class="media" ng-repeat="dish in menuCtrl.dishes | filter:menuCtrl.filtText">
<div class="media-left media-middle">
<a href="#">
{% verbatim %}
<img class="media-object img-thumbnail" ng-src={{dish.image}}
alt="Uthapizza">
{% endverbatim %}
</a>
</div>
var dishes = [
{
name:'Uthapizza',
image: "{% static 'images/uthapizza.png' %}",
category: 'mains'
}
]
So according to this post the author suggests that you declare a variable and then use it.
<script>
var MY_STATIC = '{% static %}';
function EscapeMyUrl(path) {
return MY_STATIC + path;
}
</script>
django will render this template on server and put the correct value against it.
In the current setup once your data reaches client, angular doesn't know what or how to render django script which is probably the issue.
script: update the object properties like so
image: "images/uthapizza.png"
html
<img class="media-object img-thumbnail" ng-src="EscapeMyUrl({{dish.image}})" alt="Uthapizza">
Please check and let us know if this has worked and suggest any changes/fixes, so people don't end up using an incorrect answer :)
I'm writing an ionic application and I have a problem. I'm note sure where the problem is here but I have this code
<div ng-if="ads.length > 0" class="card advertisement itemdetail">
<ks-swiper-container
autoplay="5000"
speed="300"
loop="true"
show-nav-buttons="false"
space-between="5"
pagination-clickable="false"
pagination-is-active="false"
>
<ks-swiper-slide class="swiper-slide" ng-repeat="ad in ads">
<div class="item item-text-wrap">
<a target="_blank" ng-href="{{ad.web}}" onclick="window.open(this.href, '_blank', 'location=no'); return false;">
<img src="{{ad.ad}}"/>
</a>
</div>
</ks-swiper-slide>
</ks-swiper-container>
</div>
Now the problem is that when the ads variable is empty (if it's not, everything works as expected), I'm getting this error in my browser console:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8100/{{ad.ad}}
So my question is, why is it trying to load http://localhost:8100/{{ad.ad}}? Why is the {{ad.ad}} variable treated as plaintext? Shouldn't this all be skipped because the ads.length is 0?
Thanks a lot!
Ok this seems to have solved my issue: https://docs.angularjs.org/api/ng/directive/ngSrc
I have the following in my Angular view:
<a ui-sref="mystate({'stateParam1': 99, 'stateParam1': 98})" ng-bind="myCtrl.something.something.username">
</a>
<img ng-src="http://www.gravatar.com/avatar/{{myCtrl.something.something.md5Email}}"/>
It works just fine. I can see a link (for my username). And it is followed by a nice Gravatar image of myself.
But I actually want my image and my username to both be in the body of the link.
I tried the following but it only showed my username, not the image:
<a ui-sref="mystate({'stateParam1': 99, 'stateParam1': 98})" ng-bind="myCtrl.something.something.username">
<img ng-src="http://www.gravatar.com/avatar/{{myCtrl.something.something.md5Email}}"/>
</a>
So how can I make this work? It seems using ng-bind in the <a></a> tag overrides any text that is inserted between the opening and closing tags.
I think you can do this without ng-bind
<a ui-sref="mystate({'stateParam1': 99, 'stateParam1': 98})">
{{ myCtrl.something.something.username }}
<img ng-src="http://www.gravatar.com/avatar/{{myCtrl.something.something.md5Email}}"/>
</a>
I'm trying to show the image from the database. However, I can't put the angular variable inside the # sign of the Scala template.
<div class="col-sm-6 col-md-3" ng-repeat="product in products">
<a href="#">
<div class="thumbnail">
<img class="img-responsive" ng-src="#routes.BookStore.getImage(product.name)">
...
</div>
</a>
</div>
It gave Error: Can't find the product variable. I also tried:
<img class="img-responsive" ng-src="#routes.BookStore.getImage( {{ product.name }} )">
It still gave me the same error. How can I use the AngularJs variable inside the Scala template?
You CAN NOT that's obvious - Scala template is processed at backend side much, much earlier then it arrives to frontend. Instead your Angular app should have some method which will create a string containing path to the image literally, something like /book-store/get-image/foo.jpg and then add a route to your routes file:
GET /book-store/get-image/:fileName controllers.BookStore.getImage(fileName)
Optionally you can try to go with javascriptRoutes, but it's not necessary.