I am adding images to divs with ng-repeat which works fine. The image location data is nested in an array. The images show up as expected. My partial looks like:
<div class="image-wrapper">
<img src={{item.user.img_src}}>
</div>
However, it appears the page is to attempting to retrieve the string before AngularJS is loaded. I get the following console warning:
GET http://localhost:3000/%7B%7Bitem.user.img_src%7D%7D 404 (Not Found)
How do I prevent this?
The src attribute is buggy when Angular markup is used. Use ngSrc instead of src.
Thus, <img ng-src="{{item.user.img_src}}">
When the browser first loads the page it sees your src exactly as you wrote it. It's not until Angular loads and processes the page that it updates your dynamic source. Neither of these is what you want to have happen (especially since you could accidentally create the bad empty src attribute). Instead, use ngSrc directive so that no src will be set until Angular has evaluated your expression:
http://docs.angularjs.org/api/ng/directive/ngSrc
Related
Hi all..
referring to ngRoute,
i created a single page application but would like to apply different css rules to each sub-page like background image
how can i do that?
i assigned a different controller to each sub-page
and in the link tag i used ng-href and {{name}}.css to tell the browser to grap the correct css file where is name is giving the value of the file name and attached to the scope inside the corresponding controller.
is there a need to use more than one ng-controller ?
here is the view : http://shireefkhatab.github.io/imax-design
and my code : https://github.com/shireefkhatab/imax-design
hope to get a response
thank you all in advance.
Reefo.
You can include those styles in your template (views) or make separate route for styles, add its view in head section and then change state from your controller using $state.go('where.ever.you.want.to.go');
I am trying to work out how some code is working, it uses angular throughout the front end.
When the page first loads a div with ng-include should be in the dom but its src url is a call to a js function that returns undefined on page load.
<div id="test_div" ng-include="getUrl()"></div>
When I check the dom the entire element is not on the page. After a search button is pressed some other calls happen and the call to getUrl() will return a valid url from that point on, which returns html content from the server.
It is only then that the div appears in the dom and it now has a class added to it of class="ng-scope".
I dont understand how this is happening, does ng-include continue to request a resource until it is avilable?
I couldnt find this information in the documentation.
I have the following image tag:
<img src="default.png" data-new-image/>
newImage is a directive that I have defined that will fetch the image from the server (based on some criteria) and while it calculates and fetches the image, I have the default.png image file shown.
In this directive, I have defined the link function as:
return {
link: function (scope, element, attrs) {
//My custom logic here to determine which image to show
//and then fetch from the server
//After HTTP request, assigning image to image source
attrs.src = "image_fetched_from_server.png";
}
};
But this does not update the images src attribute. I can see the image fetched clearly and a console.log(attrs) after assigning the image shows that the source attribute was updated with new image. But the DOM inspector in the browser shows no change to the source - it still shows default.png
I am using directive here and not controller - I understand I can use controller and use ng-src but I have this logic across multiple controllers and a directive is the best option I have. How do I change the source of the image tag? I wonder how ng-src does it?
I found the cause.
To set values in the attribute, I needed to use attrs.$set(attribute_name, value).
Thus, I replaced attrs.src with attrs.$set('src', 'image_fetched_from_server.png'); and it worked!
ng-src is nothing but another directive which passes a "source" attribute (or binds it) to a given directive / whatever.
So - what is the name of the directive you are trying to make? One option might be to encompass the entire <img.../> tag in your image-loader-directive
The other issue that might be occurring, could have to do with the fact that your DOM defines src="default.png" instead of something like src="{{ image_src }}". This way the minute your directive decides to change the meaning of image_src - the DOM will refresh and hence pull the correct image from its source.
I have a backbone.js CMS of sorts, that accepts html and then renders it in the browser. The following is the template file (in .hamlc) that renders the backbone page object.
%h1.text= #page.get('title')
.text.page-content!= #page.get('content')
This works fine, until I have a <script> tag. I have a script tag for a widget (below)
<script src='http://www.opentable.com/frontdoor/default.aspx?rid=52900&restref=52900&bgcolor=8AA86B&titlecolor=0F0F0F&subtitlecolor=0F0F0F&btnbgimage=http://www.opentable.com/frontdoor/img/ot_btn_black.png&otlink=FFFFFF&icon=light&mode=short&hover=1'></script>
This widget uses document.write (which you can see if you look at the source). First, when I load the page it doesn't show anything (I've tested the widget in an html file by itself and it displays their normal god-awful ). When I inspect the element, it looks like the script tag was removed.
However, when I test with the following:
<script type="text/javascript">
alert(0);
</script>
It runs. Still nothing in the inspector though.
Finally, testing with the following:
<script type="text/javascript">
document.write('test');
</script>
It also runs. However, it completely destroys the page content and just shows 'test'.
According to this article about using document.write for widgets, it says it can't be run after the page load. I'm assuming that's what's happening here is that document.write is being run after page load and destroying all the content, given that's the technique backbone.js uses (appending/replacing elements in the DOM once the page is loaded).
How can I make my Backbone.js CMS accept script tags with document.write widgets without either not showing anything or destroying the entire page?
I cannot reproduce it, the template renders as it should:
$ coffee
coffee> hc = require './src/hamlc'
{ compile: [Function],
template: [Function],
__express: [Function] }
coffee> template = hc.compile ".text.page-content!= #content"
[Function]
coffee> template(content: 'Hello <script>Script</script>')
'<div class=\'page-content text\'>Hello <script>Script</script></div>'
and the script tag is persisted. Do you have the latest version installed?
You're calling document.write after the page has been loaded, so it'll overwrite the whole page. You could try putting the script tag in an iframe, or monkey patch document.write to behave differently after the page has been loaded. See the top answer on this question:
Dynamically added JavaScript overwrite the html page view (not the code)
If I understand correctly, you're trying to include the script tag for the widget inside a template, which means it's being inserted after the initial DOM is ready. That won't work for the reasons you mentioned; when the script executes, it will replace everything in the DOM.
You need to load the script before the initial DOM is complete, that is either in <head> or at the beginning of <body>. That in turn means that you have to include the script tag in your initial HTML as delivered by the server rather than trying to dynamically generate it client-side.
I want to let the user crop an image, I found this JQuery plugin - http://deepliquid.com/content/Jcrop.html
I tried to use it with Angular-ui's Jquery passthrough option, adding the ui-jq=Jcrop directive to the <img>
The problem is that If I use ng-src to dynamically change the image it doesn't work and nothing is seen. If I change it to src and put a static url I can see the image and Jcrop.
how can I fix that ?
also, how can I listen to Jcrop's callbacks to know what is the user's selection ?
is there a better / simpler way to add image cropping functionality to AngularJS ?
Here is my solution:
I've written a directive that create img element and apply plugin on it. When src is changed, this img is removed and content that was created by plugin is also destroyed and then re-created new img with new src and again applied plugin on it.
Also provided 'selected' callback to be able to get coordinated that were selected (wrapped in $apply so you can modify your scope values in it).
Check my solution at Plunker
I've built a demo using AngularJS and Jcrop here:
Demo: https://coolaj86.github.com/angular-image-crop
On Github: https://github.com/coolaj86/angular-image-crop
You can leverage ui-event to create an event definition object with the keys being the event names and the values being the callbacks. Or you can simply pass these events as options to Jcrop (according to the documentation)
Finally, there is a new update coming to ui-jq that lets you add ui-refresh which is an expression to be watched to re-trigger the plugin.
Theoretically you should be able to do
<img ui-jq="Jcrop"
ui-options="{onSelect:myCallback}"
ui-event="{onChange:'myCallback($event)'}"
ui-refresh="imgSrc"
ng-src="imgSrc" />
Note: this simply re-fires the passthrough again, and doesn't automatically mean this will fix the problem or that the plugin will behave properly when re-initialized
We're still working on a good way to allow you to trigger different events at different times.