In my project called App, I have a controller, which contains a complex object that has a field referencing App/img/blue.jpg:
myApp.controller("myController",function($scope){
$scope.message = "Home Page";
$scope.Photo1 = {
name: "blue_bird",
image:"/img/blue.jpg"
};
});
However the image is not loading when I do this:
<img src="{{Photo1.image}}" />
I also tried changing the image field to img/blue.jpg and ~/img/blue.jpg, none works. When I change image to a web link, though, it works
Read the documentation here.
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.
The buggy way to write it:
<img src="{{Photo1.image}}"/>
The correct way to write it:
<img ng-src="{{Photo1.image}}"/>
Found the answer. In the Projects panel on the left hand side of the window, click the Files tab, drag the file into the editing area, right between the quotation marks of the src="" attribute. The img tag then looks like this:
<img src="../img/blue.jpg" alt="" />
So the object in the controller should look like:
$scope.Photo1 = {
name: "blue_bird",
image:"../img/blue.jpg"
};
And in View:
<img ng-src="{{Photo1.image}}"/>
Related
I have two pieces of HTML I need to output the first is an opening tag of a div that represents my header, the second is the closing tag of the div that will represent the footer. Between the two I have dynamic content that I cannot control. I want headerHTML to include the opening div and CSS class and the footer to close the header div to wrap all the content that will be in between.
<ng-bind-html ng-bind-html="headerHTML" />
<ng-bind-html ng-bind-html="footerHTML" />
So after render it should look like:
<div class="myCSSClass">
A bunch of dynamic content created between the two binds
</div>
However, what happens is this:
<div class="myCSSClass">
</div>
A bunch of dynamic content created between the two binds
<div>
</div>
The problems is that it is auto adding the closing tag for the headerHTML when its not part of the content. This causes the page to render incorrectly. Is there another way to inject HTML content without it adding closing tag?
Under the hood, the ng-bind-html directive uses Node.appendChild. This means that it must attach a complete element. If the HTML omits a closing tag, the browser has to close the element. This is the way the DOM works. The browser can't split opening and closing tags between two .appendChild operations.
To do what you want, use a component that transcludes contents:
app.component("myComponent", {
bindings: {
headerHtml: '<',
footerHtml: '<',
},
template: `
<div class="myCSSClass">
<div ng-bind-html="$ctrl.headerHtml"></div>
<div ng-transclude></div>
<div ng-bind-html="$ctrl.footerHtml"></div>
</div>
`,
transclude: true
});
Usage:
<my-component header-html="headerHTML" footer-html="footerHTML">
This content will be sandwiched between header and footer.
</my-component>
For more information, see
AngularJS ng-transclude Directive API Reference.
AngularJS Directive Definition Object API Reference - transclude
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.
I have retrieved an image and its corresponding data dynamically, in which I want to make the image clickable which will redirect to a webpage.
How can I achieve this using angularJs.
I am using only angularJs, no jquery.
Below you can see you can assign the values to an object and then use that object on the image tag. If you want to make any other changes on click as well then you can use ng-click as shown below then use $location.url.
$scope.object = {};
$scope.object.filepath = filepath;
$scope.object.redirectURL = redirectURL
<img ng-src="object.filepath" ui-sref="{{object.redirectURL}}" />
$scope.redirect = function(redirectURL)
{
$location.url(redirectURL);
};
<img ng-src="object.filepath" ng-click="redirect(redirectURL)" />
You can use ng-click on the image element. You can handle the click event in your controller where you can navigate to the webpage.
In your controller you can redirect the page to the webpage url.
$scope.goToWebpage = function(imageParam){
window.location.href = "http://UrlToWebpage.com";
}
Alternatively you can wrap the image inside an anchor tag. On clicking the image the page will be redirected to the specified url mentioned in href.
<a href="http://UrlToWebpage.com" >
<img src="sourceToImage" />
</a>
I would like to add an iframe to a page when certain links are clicked and remove it when other mouse events happen on the page. From what I can see, it seems that using an AngularJS directive would be the best way to do this. What I'm not sure about is what is the best way to format the directive. I'm thinking of making the directive at the attribute level...something like this:
<div myIframeDirective></div>
What I'm not sure of is the best way of removing/adding the directive contents (an iframe and a header above it) when various click events happen on the main page. Not looking for anyone to write the code for me...just looking for examples of how this can be best accomplished.
You should be using ng-if.
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
Here's a working example:
var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
</div>
In Angular, ng-if will remove the iframe from the DOM if it is false.
This means the URL will NOT be requested until ng-if is true.
<iframe ng-if="frameDisplayed" ng-src="{{src}}"></iframe>
And use the link
Toggle
Then in your controller, you can control what your iframe display:
$scope.src = 'https://angularjs.org';
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';
}