I am storing the the source string of an image to be rendered in HTML in the AngularJS controller, however it yields a 404 before the Angular controller is initialized.
Here is the HTML:
<div ng-controller="Cont">
<img src="{{imageSource}}">
</div>
Angular controller:
var Cont = function($scope) {
$scope.imageSource = '/tests.png';
}
And the error I get (%7D%7D corresponds to the {{ in the template).
GET https://localhost:9000/%7B%7BimageSource%7D%7D 404 (Not Found)
How can I prevent this from happening? That is, only load the image when the Angular controller has been initialized?
Try replacing your src with ng-src for more info see the 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.
<div ng-controller="Cont">
<img ng-src="{{imageSource}}">
</div>
If someone is searching the solution for styling background-image then use this:
<div ng-style="{'background-image': 'url({{ image.source }})'}">...</div>
Related
I am using node and angularjs. I have a frame like page inside an ejs that is passed content to load into the includes dynamically.
<div ng-app="thisApp">
<div ng-controller='MainCtrl'>
{{ firstMessage }}
<div id='contentFromNode' ng-include='<%= pageContent %>'></div>
</div>
</div>
<script>
var thisApp = angular.module('thisApp', []);
thisApp.controller('MainCtrl', [ '$scope', function($scope) {
$scope.firstMessage = "Main Controller Working Fine";
}])
</script>
and then the passed content might be just an html page containing something like this:
<div ng-controller='NestedCtrl' id='content-type-container'>
{{ nestedMessage }}
</div>
<script>
thisApp.controller('NestedCtrl', [function(){
var nested = this;
nested.nestedMessage = "Nested Won't Work";
}])
</script>
So I have tried $scope within the NestCtrl instead of referencing this, I have tried moving the script tag above and below (ideally this get separated eventually anyway). I have tried aliasing the controllers, however my problem is the in registration of the controller itself as I get that great Error: [$controller:ctrlreg] error. The page is loading the content fine? Any ideas what I am doing wrong here?
Seems JQlite doesn't support this. You have to include jquery or lazy load the script. Refer
AngularJS: How to make angular load script inside ng-include?
I have a fairly simple ng-repeat that iterates an AngularJS directive to display images from an array of objects, where each JSON object has a img attribute with a URL of the image. Everything works fine except in the network tools I can see that the browser is trying to load an image source URL as {{ data.img }} before being interpolated into it's actual value, it's driving me crazy trying to figure out why this is happening.
Here are the relevant pieces of my code:
index.html
<div ng-repeat="data in obj">
<feed-item></feed-item>
</div>
feedItem.html (directive)
<div class="item">
<img src="{{ data.img }}" />
</div>
Angular directive
app.directive("feedItem", function() {
return {
restrict: 'E',
templateUrl: 'assets/directives/feedItem.html',
replace: true
};
});
This results in the images rendering fine, but as mentioned the following shows up in the network tools:
All of the 2 images from the array of JSON objects are loaded fine as you can see, but I have the extra request the browser is trying to make, and the "initiator" column just says "other" which is not very helpful. Any idea why this request is being sent?
As matthewdaniel said, ng-src might solve your problem. It stops the browser from trying to load that source of the image before angular can get going, you use it just like the 'src' attribute on a normal image.
I have a a single span element in my page. I am concatenating words to a single variable in AngularJS and then referencing the variable to the span element in the page.
$scope.abc = "Downstream";
$scope.abc.concat('<b>','Upstream',</b>);
When the page is viewed, it displays Downstream<b>Upstream</b>
How to display the word Upstream alone in Bold?
according to this https://docs.angularjs.org/api/ng/directive/ngBindHtml
You need to include the ngBindHtml and $sanitize service
In your js file, it should be
angular.module('App', ['ngSanitize'])
.controller('Ctr', ['$scope', function($scope) {
$scope.abc = "Downstream";
$scope.abc2 = $scope.abc.concat('<b>','Upstream','</b>');
}]);
In your html file, it should be
<div ng-controller="Ctr">
<p ng-bind-html="abc2"></p>
</div>
Seems a duplicate to angular variable generating html.
I don't know angular, but reading that post it's easy. Just do:
$scope.abc = $scope.trustAsHtml($scope.abc);
HTML
<div data-ng-bind-html="abc "></div>
Also check your Angular version, for version 1.2 or lower you could use the ng-bind-html-unsafe binding.
<div class="post-content" ng-bind-html-unsafe="abc"></div>
This does not work anymore at Angular 1.2+ According to comment of TheSharpieOne:
"It has been replaced with Strict Contextual Escaping. See docs.angularjs.org/api/ng.$sce"
I'm attempting to add an <object></object>into my html using a controller. When I load a <div> or a <p>, it works properly, but when I add an <object> it doesn't appear, nor do any custom attributes.
HTML:
<html ng-app="myAngularSite">
...
...
<div ng-controller="MyController">
<div id="myloader" ng-bind-html="myObject"></div>
</div>
JS:
var app = angular.module('myAngularSite', ['ngRoute']);
angular.module('myAngularSite', ['ngSanitize'])
.controller('MyController', ['$scope',function($scope) {
$scope.myObject =
'<object id="my_object" data="mysite.html" width="99.5%" height="400px" style="overflow:auto;border:3px ridge gray"/>';
}]);
How can I add the custom attributes and the object into my site? I noticed that attributes won't appear when I try to load a <div id"with_attribut></div> with attributes, although the divs appear by themselves.
Thanks!
The custom directive is probably the good solution, you can always add more custom behaviours. With ngBindHtml you will be limited. Here is link which can help you:
angular ng-bind-html and directive within it
I have a angularjs app with a controller and a partial wired up..
In my controller I have a array of links..
$scope.links = ['http://www.example.com/1','http://www.example.com/2'];
In my partial, I have the following code..
<div ng-repeat="link in links">
Link
</div>
This does not seem to work.. I am running this via a NodeJS app locally..and so my URLs always end up as
http://dev-server.local:3000/"http://www.example.com"
Can anyone please help me figure out how I can add a hyperlink from my controller directly into my partial template and make Angular not append the page URL..
You have to explicitly trust extern URL:s. Look at the documentation for $sce.
In you controller, make sure you have a dependency to $sce, then in create a method that trust the external url.
$scope.trustUrl = function(url) {
return $sce.trustAsResourceUrl(url);
}
In your view you can reference this method and pass in the url with
<a ng-href="{{ trustUrl(item) }}">Click me!</a>
instead of
href={{link}}
use
ng-href={{link}}