Angular.js image 404 Not Found - javascript

i've a tiny problem.
I'd like to show icons from categories i get from my rest api.
To do, i use rest angular which gives me icons as designed.
My problem, is a firebug alert:
"NetworkError: 404 Not Found - http://localhost:8888/app/%7B%7Bc.icon%7D%7D"
This is because my template is laded before api response.
<ul class="col-md-9 inner">
<li ng-repeat="c in categories"><img src="{{c.icon}}" alt="{{c.name}}" ng-cloak></li>
</ul>
This is the piece of corresponding code in my controller
Category.getList().then(function(categories) {
$scope.categories = categories;
});
As you can see, i've try to work with ng-cloak, i've also tried to play with ng-show="categories" but nothing more.
How can i avoid this behavior and load ng-repeat only when categories variable is populated ?

instead of
<img src="{{c.icon}}" alt="{{c.name}}" ng-cloak>
you should use ng-src:
<img ng-src="{{c.icon}}" alt="{{c.name}}">
From ngSrc documentation:
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

Related

Render html tag from string

I have some values as amount like 1000, 2000, <b>3000</b>, <4000>, <b>5000</b> inside JSON as an API response. I want to render this response inside a table. So I tried ng-bind-html. BUT it is showing only the value which are having tags like 3000,5000. I want to show all values , 1000,2000,4000 as a plain string and 3000,5000 in BOLD/or any other HTML tag.
angular.forEach($scope.arr2.test,function(item)
$scope.res=$sce.trustAsHtml(item.amount);
return $scope.res;
});
On HTML side, I have something like this
<td id="price" class="edit" ng-repeat="pro in d.procedure" ng-bind-html="valueCheck(d._id,pro._id,hos._id)"></td>
You can use ng-bind-html and ng-bind-html-unsafe for this. But please be mindful of the security concerns here.
You can find more details here
Do make sure you sanitize your strings, to prevent security vulnerabilities
First of all you need to download the ng-sanitize js
https://docs.angularjs.org/api/ngSanitize
and then inject ng-sanitize to angular module.
then you can use ng-bind-html and ng-bind-html-unsafe
you can use ng-sanitize module for the same - see here
var app = angular.module("myApp", ['ngSanitize']);

AngularJs ng-src in Iframe [duplicate]

This question already has an answer here:
Unable to load url into iframe via AngularJS controller
(1 answer)
Closed 8 years ago.
I am attempting to set the ng-src of an iframe using a scope variable and it keeps coming through as blank.
I tried this:
<div ng-repeat="url in urls">
<div ng-click="testAlert(url.domain)">
<iframe ng-src="{{ url.domain }}" ></iframe>
<div style="text-align: center">{[ url.domain ]}</div>
</div>
</div>
The text shows up just fine, so I know the values are there as well as the click alerts the select domain. It is just the ng-src seems to end up blank and therefore doesn't pull up the site. If I hard code the ng-src to an external site it works.
Most likely has to do with $sce not being configured to trust the external resource when interpolated... Try putting this in your controller (be sure to inject $sce service). trustAsResourceUrl is the method you will be interested in and you would pass the URL you want to use to that:
.controller("MainController", function ($scope, $sce) {
var urls = [];
//Need to trust resource to be able to interpolate, see $sce documentation
urls.push({domain: $sce.trustAsResourceUrl("http://angularjs.org")});
urls.push({domain: $sce.trustAsResourceUrl("http://www.jquery.com")});
$scope.urls = urls;
$scope.testAlert = function (value) {
alert(value);
}
});
See working fiddle.

src stripped from json html data when using angular.js and angular-sanitize.js

I'm an angular noob here... but enjoying figuring it out. I have simple json file containing text like so:
"gettingstarted":{
"title":"Getting Started",
"content":"<img ng-src='images/pageone-snorkeler.png' width='150' height='107' alt='Snorkeler' /><p>Getting Started...... and a lot of other html in here...</p>"
},"etc..."
I am trying to load images into the rendered html, however, angular seems to be stripping the src and ng-src from my html.
My page.tpl.html file looks like so:
<h1 ng-bind-html="page.title"></h1>
<div ng-bind-html="page.content"></div>
I am loading / using:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.min.js"></script>
I can see all the html render in the page correctly from the json data, however, not the image. It is rendering like so:
<img width='150' height='107' alt='Snorkeler' />
What am I missing to get images to load in my html?
EDIT::::
Looks like I needed to word my question different... I found the answer here: ng-bind-html does not load image src
ng-bind-html-unsafe
...which isn't working for me... or use the fully resolved url: http://superraddomainname.com/image/image.png for example.
ng-bind-html-unsafe has been removed in angular 1.2. What you've done with ng-bind-html should work, you have to make sure you add ngSanitize as a dependency in your app. For example...
angular.module('myApp', ['ngSanitize']);
Demo - Fiddle

AngularJS <a> tag links not working

I have an index of objects returned from search. The template has an ng-repeat where the item's URL is constructed from data in the model but in the final markup the "a" tag does not work. The ng-href and href are correct, the URL bar changes when the link is clicked but the page does not load. Doing a browser refresh after the click does get the page. So something in Angular is changing the URL bar but not triggering a load???
Can't make this reproduce in a jsfiddle because the problem seems to be in loading the json into the template after a $resource.query() function, which I can't do from a jsfiddle. With a simulated query loading static data the jsfiddle works even though the final markup looks identical.
The AngularJS template looks like this:
<div ng-controller="VideoSearchResultsCtrl" class="row-fluid">
<div class="span12" >
<div class="video_thumb" ng-repeat="video in videos">
<p>
<a ng-href="/guides/{{video._id}}" data-method="get">
<img ng-src="{{video.poster.large_thumb.url}}">
</a>
</p>
</div>
</div>
</div>
The results look fine and produce the following final markup:
<div ng-controller="VideoSearchResultsCtrl" class="row-fluid ng-scope">
<div class="span12">
<!-- ngRepeat: video in videos --><div class="video_thumb ng-scope" ng-repeat="video in videos">
<p>
<a ng-href="/guides/5226408ea0eef2d029673a80" data-method="get" href="/guides/5226408ea0eef2d029673a80">
<img ng-src="/uploads/video/poster/5226408ea0eef2d029673a80/large_thumb_2101146_det.jpg" src="/uploads/video/poster/5226408ea0eef2d029673a80/large_thumb_2101146_det.jpg">
</a>
</p>
</div><!-- end ngRepeat: video in videos -->
</div>
</div>
The controller code is:
GuideControllers.controller('VideoSearchResultsCtrl', ['$scope', '$location', 'VideoSearch',
function($scope, $location, VideoSearch) {
$scope.videos = VideoSearch.query({ namespace: "api", resource: "videos", action: 'search', q: $location.search().q });
}
]);
Using AngularJS 1.2-rc.3. I've also tried using an ng-click and regular old onclick to get a page loaded even with static URL but the clicks never trigger the code. BTW static non-angular links on this page do work, so the Menu Bar and Sign Out work.
What have I done wrong here or is this a bug in AngularJS?
From the mailing list I got an answer:
Have you by any chance configured your $locationProvider to
html5Mode? If yes this would cause your problems. You could force it
to always go to the url by adding target="_self" to your tag. Give
it a shot.
I had configured to use HTML5 so adding the target="_self" to the tag fixed the problem. Still researching why this works.
Not sure if this has been updated since this post was answered, but you can configure this in application startup. Setting the rewriteLinks to false re-enables your a tags, but still leaves html5mode on, which comes with all its own benefits. I have added a bit of logic around these settings to revert html5mode in browsers where window.history is not supported (IE8)
app.config(['$locationProvider', function ($locationProvider) {
if (window.history && window.history.pushState) {
$locationProvider.html5Mode({
enabled: true,
requireBase: true,
rewriteLinks: false
});
}
else {
$locationProvider.html5Mode(false);
}
}]);
Angular Docs on $locationProvider
The benefits of html5mode vs hashbang mode
I know this post is old, but I recently ran into this problem as well. My .html page had the base
//WRONG!
<base href="/page" />
and the fix:
//WORKS!
<base href="/page/" />
notice the forward-slash ('/') after 'page'.
Not sure if this applies to other cases, but give it a try!
AngularJS suffers from a sparse documentation, I hope their gaining momentum will improve it. I think AngularJS is primarily intended as a SPA, and maybe the idea behind deactivating by default all a tags allows one to easily incorporate angular into some already existing html.
This allows for quick refactoring of the default "routing" behaviour of a "traditional" website (well, script pages linked between each other) into the angular routing system, which is more of an MVC approach, better suited for Web Apps.
Find this line:
$locationProvider.html5Mode(true)
change it for:
$locationProvider.html5Mode(true).hashPrefix('!')
and include this line in the head of index.html if you don't have it.
<base href="/">
I see this is old, but this is one of the top results on Google.
So if you are using Angular 7, and only want to link a couple of files, then just put the into the "assets" directory:
Now when you want to link the file you can just use the href tag as below:
<img src="assets/ang_1.png" alt="Angular">
Note: you can only link to the assets folder by default, so you strictly have to place your files there.

ng-bind-html does not work

please look at this fiddle
please type 4 in the text area,
it should write an error message, that is in this line:
$names.push('<div ng-bind-html-unsafe="snippet"></div>');
actually it does not. It prints the html code itself without handling,
and the underlying html is:
<li ng-repeat="user in list|splitList:appUsers" class="ng-scope ng-binding">
<div ng-bind-html="snippet"></div>
</li>
I tried to follow solutions from this topic
but nothing seem to help,
any help in fixing it will be regarded,
I got help from the chat room of angularjs,
the thing is that I should use:
<div ng-bind-html-unsafe="user">...</div>
instead of {{user}}
To get it to work you will need the following:
Declare it in html
div ng-bind-html="{expression}"></div>
Or
div class="ng-bind-html: {expression};"></div>
AND
reference angular-sanitize.min.js and then add
angular.module('YOUR_APP_NAME', ['ngSanitize']);
The last two are in the angularjs documentation for some reason...

Categories