I need to show a picture in a blade view loaded dynamically with AngularJS.
this is the short piece of code causing me many headaches since many days:
<img ng-src="#{{ $video.thumb }}" width="57">
if I put #{{ $video.thumb }} outside the img ng-src I get the correct path of the image.
I wouldn't change the whole app using interpolate provider.
var sampleApp = angular.module('sampleApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
More in HTML if I search with the inspector for the img tag I can't see anything, just
<img width="57">
I'm running it locally.
Please help me
I post the solution if someone else need it.
I had to use the full url in the ng-src.
Since I'm using Laravel and I'm working on a Blade view I had to use the following code:
<img ng-src="{{ url('/') }}/storage/#{{ video.thumb }}" width="57">
with {{ url('/') }} to get the domain url, then added /storage/ because I saved my files in that folder and at the end the angular var.
Related
Really stuck here so will appreciate the help.
Let me explain my set up/stack first:
Backend - Node with Express
Frontend - Angular
Snippet from the Node part of the code:
var router = express.Router();
router.get('/main', function(req, res){
res.render('wall', {siteTitle:'Home'});
});
Snippet from the HTML page:
<p>{{ siteTitle }}</p>
<div ng-controller="wallPosts">
<div ng-repeat="post in posts">
<p>{{ post.title }}</p>
</div>
<div>
Snippet from the Angular controller:
var angularApp = angular.module('angularApp', []);
angularApp.controller('wallPosts', ['$scope', '$http', function($scope, $http){
$http.get('/api/posts')
.success(function(result){
$scope.posts = result;
console.log(result);
})
.error(function(data, status){
console.log(data);
});
}]);
Okay so here is the problem - {{ post.title }} bit in the HTML page is not getting updated. However, this is: {{ siteTitle }}
The difference - post.title comes from the Angular app whereas the siteTitle comes from the res.render from Node.
Also, the console.log in the Angular controller works as I wanted to rule out there being a problem with the connection. Also, I have ruled out the '/api/posts' API call as it does indeed pass on an array of objects.
I have configured my Node to use 'hogan-express' as below:
Snippet from Node:
app.engine('html', require('hogan-express'));
So - can someone help me out here? What am I doing wrong? I want my Node to do the routing plus act as an API server and Angular just to get the data from the APIs and just chuck them out to the HTML page.
Thanks in advance,
Shayan
Use something like this {[]} as either your server-side template syntax or your client-side (Angular) template syntax. Shouldn't matter which one you set. If you choose client-side, set it within the Angular config injecting in the $interpolateProvider. See the Angular docs for more info.
Also I think this is a possible dup...
The issue is that template tag for both your AngularJS and NodeJS template engine are same.
One fix is to change the AngularJS template tag to some something
other than {{. You can do it by config.
Or change the template tag of the NodeJS template engine to
something other than {{
Or for a quick fix you can move following code to a separate html
and include it using ng-include.
<div ng-controller="wallPosts">
<div ng-repeat="post in posts">
<p>{{ post.title }}</p>
</div>
<div>
I know you can select multiple files like this using "Jquery":
selection.map( function( attachment ) {
attachment = attachment.toJSON();
$("#something").after("<img src=" +attachment.url+">");
});
but how is selecting multiple files done with Angular.js
From the code snippet, we can assume that you have an array selection that look something like this:
$scope.selection = [
{url: 'http://......', otherKey: 'otherValue1'},
{url: 'http://......', otherKey: 'otherValue2'},
.....
];
And you're appending image to a DIV with ID #something. The view should contain ngRepeat for iterating the objects inside selection and IMG tag with ngSrc with the url of each image. Something like:
<div id="something">
<img ng-repeat="img in selection" ng-src="{{ img.url }}" />
</div>
I'm assuming you know how to add a controller and you learned how to bing properties from the controller to the view using $scope.
<div class="container" ng-repeat="item in itemslist">
<img ng-src="{% static "img/new/item.imagename" %}" alt="" />
</div>
item - > is an object, below is the object definition
var firstItem = {};
firstItem.id = 0;
firstItem.name = "testfirstname";
firstItem.imagename = "cart.png";
var secondItem = {};
secondItem.id = 2;
secondItem.name = "testsecondname";
secondItem.imagename = "home.png";
itemslist- > [firstitem, seconditem]
In the runtime, item.imagename is not getting replaced by its value (cart.png). coming out of the iteration. The request still looks with the variable name (item.imagename) and not the value (cart.png).
Page not found (404)
http://example.localhost.com:8000/static/img/new/item.imagename
How do I get this working?
The order in which a page renders with Django is:
A request is made from the client (browser) to the server (ultimately Django).
Django matches a view using the url, and from the view renders the template in server.
The client gets the response and renders the page. At this stage, the client knows nothing about Django, its templating system etc.
Angular is a JS technology that operates client-side. It has absolutely no way to know about static files, Django templates etc.
Therefore, if you require to load an image in client-side, then you have to properly specify the url beforehands. Since you know the name, you need only to provide the rest of the url to angular.
To do that, you need to include settings.STATIC_URL to your context, and render it into a js variable in your template. This variable will travel through to client, and then in angular use it to properly build the url.
Be sure to take care of angular's security considerations about interpolation though, but that's a different matter entirely.
The server-client confusion is a common one when beginning web development.
I think this is what you need
<div class="container" ng-repeat="item in items>
<img ng-src="{{static + '/img/new/' + item.image}}" alt="" />
</div>
I consider static = base url, according to your comment
For anyone who has this issue in the future,
What ever you're static_url is in the django settings. For example:
STATIC_URL='/static/'
then in your template do this:
<div class="container" ng-repeat="item in items>
<img ng-src="static/img/new/{{item.image}}" alt="" />
</div>
I faced same issue, but in the context of using Mustache and Django templates. Here is what worked for me.
settings.py:
STATIC_URL = '/static/'
Mustache template part of html:
<div class="avatar"><img alt="" src="{% verbatim %}{{ userAvatar }}{% endverbatim %}" /></div>
Javascript that renders the Mustache template sends the "userAvatar" in the following format:
"userAvatar" : "/static/images/avatars/" + avatarNameFromServer
I have an angular app. I load a spreadsheet into it, do some javascript, and then I want to render a variable number of tabs each with an ngGrid depending on whats in the spreadsheet I load into the page. Therefore I have to render the html with the angular markup after app initialization.
I tried putting the part of the page with the tabbed ngGrids in a nested controller and not doing app.controller('SubController', SubController); until after the spreadsheet is parsed. However, the controller is getting initialized at page load.
My initialization code looks like:
var app = angular.module('app', ['ngGrid', 'percentage', 'ui.bootstrap', 'angularFileUpload', 'vr.directives.slider']);
What do I do to make the nested controller not initialize at page load time?
Obvious in hindsight, was just to use a ngRepeat directive.
<div id="x-{{ $index }}" class="col-sm-12" data-ng-repeat="Grid in Grids" style="display: none">
<div id="divGrid-{{ $index }}" data-ng-grid="Grid" class="gridStyle"></div>
</div>
I have a Newbie AngularJS question. I was checking the tutorial and in the step 6 there's the following line of code:
<img ng-src="{{phone.imageUrl}}">
Where they explain that you must to use ng-src instead of src or else the browser will treat {{phone.imageUrl}} literally. However in the same line appears href="#/phones/{{phone.id}}" where no special tag is being used.
Why this is like that? This only applies for an <img> tag or there are another situations where you must to use ng-scr?
Both ng-src and src works just fine. The only thing to notice is when the img tag is evaluated, angular might not be loaded so the image url won't make sense to the browser. If you can guarantee that angular will be loaded before the browser evaluates img, you can use src with angular expression as the source.
Here's a jsFiddle demonstrating this.
http://jsfiddle.net/PkpL3/
HTML:
<div ng-controller="MyCtrl">
<img src="{{name}}"/>
<img ng-src="{{name}}"/>
</div>
Controller:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = 'https://www.google.com/images/srpr/logo5w.png';
}