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 :)
Related
I'm using hugo.
I want to use i18n in content/contact.md.
However, I can't use variables and such in the same way as I use html under normal layouts.
How can I do this?
■content/contact.md
---
draft: true
---
<div class="app_static_contents app_static_contents-form">
<div class="app_static_contents-form_box flex-l justify-between items-center center">
<h3 class="">{{ i18n "inquiry" }}</h3>
<div class="app_static_contents-form_link">
<a class="btn" target="_blank" href="{{ .forms.inquiry.url }}" >{{ i18n "fromHere" }}</a>
</div>
</div>
</div>
You are looking for Hugo shortcodes. You can also use markdown render hooks if the content is an image, link or heading.
Is there a reason you're writing HTML for this static page directly in your markdown? You would be better off creating a dedicated layout for your contact page in layouts. Then you can use the i18n features in your HTML without worrying about shortcodes.
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>
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.
I have an angular JS application, which has a number of images, from an array.
My model looks something like this
$scope.images = [ {url: 'someimage.png', desc: 'some desc'}, {url: 'someimage.png', desc: 'some desc'} ]
In my view, I iterate over this, to display all the images.
<ul>
<li ng-repeat="image in images" ><img src="{{image.url}}" /></li>
</ul>
This works, but I get some page errors, which say
404 Not Found - http://localhost/{{image.url}}
The images are displaying correctly, so it is clearly the images are trying to be loaded before Angular has parsed to document get it ready. My scripts are also in the head, so it should not be a javascript ordering error.
The problem here was that I should be using ng-src and not src, so that it will only try to display the image when Angular is ready.
So, the correct code looks like
<ul>
<li ng-repeat="image in images" ><img ng-src="{{image.url}}" /></li>
</ul>
I'm new to Symfony2 (with knowledge in 1.2-1.4) and having little trouble trying to fetch some objects from the DB. I have a base template (index.html.twig) which have the following code block:
<nav>
<ul class="menu">
<li><a class="active" href="index.html">Home Page</a></li>
{% for category in categories %}
<li>{{ category.name }}</li>
{% endfor %}
<li class="last-item">Contact Us</li>
</ul>
</nav>
The method fetching categories is inside DefaultController:
public function indexAction()
{
$em = $this->getDoctrine()->getEntityManager();
$categories = $em->getRepository('XxxYyyBundle:Category')->findAll();
$genres = $em->getRepository('XxxYyyBundle:Genre')->findAll();
echo $categories.$genres;
return array('categories' => $categories, 'genres' => $genres);
}
If I access the page from Default it works perfectly, but if I try to access from another page that extends the template (using {% extends "XxxYyyBundle:Default:index.html.twig" %}) I get the following error:
Variable "categories" does not exist in XxxYyyBundle:Default:index.html.twig at line 53
I tried all the options included in the book (% include, etc) with the only conclusion that from another pages indexAction() is not executed. I think that fetching items from the DB to include them in a menu is something usual, so if someone is familiar to this matter I'll be very grateful for any help.
Thanks.
The easiest way is to place a render tag in your layout and reference a controller that runs the queries and renders the menu fragment.
{% render 'SomeBundle:Menu:menu' %}