according to this question (Polymer 1.0 iron-ajax call is made but on-response does not fire and the data isn't bound)
I have a similar problem when I try to use my element. but the iron-ajax element is inside of the template tag.
Ironically my custom element work's, when I use 'polyserve' and I can see in the console log that my function for handling the response is executetd.
This does not happen, when I include my element e.g. in the starter-kit-app after adding it to elements.html and including it to index.html.
The 'auto' attribute for iron-ajax is set.
Why is the ajax request executed when using 'polyserve', but apparently not when using it in my app while serving with a simple http-server (python -m SimpleHTTPServer)? Any suggestions?
Thx in advance
Related
I have a Drupal web service that returns a JSON response in the following format. I can easily access top level notes e.g. title. However, I also need to access the value under body. I can get body.und but not body.und.value. How do I do that? Also the HTML tags are showing as text and I can see all the slashes getting printing in my Angular View.
Update: I have been able to get the the value of the body by using $scope.body
= myresponse.data.body.und[0].value;
Now the only problem is how to process HTML in the body. My Angular framework which is Ionic is showing all the HTML tags e.g. p li etc instead of formatting them.
{"vid":"37","uid":"1","title":"Terms of Use","log":"","status":"1","comment":"1","promote":"0","sticky":"0","nid":"37","type":"page","language":"und","created":"1395878580","changed":"1501982359","tnid":"0","translate":"0","revision_timestamp":"1501982359","revision_uid":"1","body":{"und":[{"value":"THESE TERMS OF USE (\"TOU\") ARE A LEGAL CONTRACT BETWEEN YOU (\"USER\") AND
$scope.body = myresponse.data.body.und[0].value; helped me get access to the value of the body of the node.
ng-bind-html="body" helped me get access to the body of the HTML.
In my application i am passing parameters for controller and read it using javascript as below.
localhost:8080/app/conroller#parameter=value
now problem is if i open my conroller in url and than append #parameter=value than only it works.
but i want to put whole link in anchor tag.
and when i click outside application than it automatically reroute localhost:8080/app/conroller and don't accept parameters.Although when opening that url if i apped #parameter=value* part than it works perfect.
i am using html5mode = true.
i search lots of document but didnt find right solution for this.
Not exactly sure if I get what you are asking but I think this is what you are getting at:
href="/app/conroller#parameter=value" target="_self"
Try adding the target self.
If that doesn't work you could try setting a base url <base href="/"></base>
You could try using ? for the query parameter instead of the #
I am using UI Bootstrap for collapsing/expanding a div section based on user clicking a button similar to the example shown in the official site - UI Bootstrap-Collapse
I included the latest version of ui-bootstrap(0.14.2) but it was not showing the expected behavior. In particular the collapseDone() and expandDone() callbacks are never called after the $animateCSS is done the animations. (The animations are working properly, presumably because of the css transition property of the class 'collapsing' in twitter bootstrap.)
But when I inspected the UI Bootstrap site, I found that it's working properly as expected. (That's the class 'collapsing' is added during the animation and then removed after animation and then the class 'collapse' is added). So I checked the source code link for collapse collapse source code -github and found that finally is used for $animateCSS promise resolution rather than done in the ui.bootstrap.js code I included.
So could someone please explain the difference between finally and done methods of the $animateCSS function? The documentation [Angular Docs-$animateCSS][3] says that
there is also an additional method available on the runner called .done(callbackFn). The done method works the same as .finally(callbackFn), however, it does not trigger a digest to occur. Therefore, for performance reasons, it's always best to use runner.done(callback) instead of runner.then(), runner.catch() or runner.finally() unless you really need a digest to kick off afterwards.
So it looks like both should behave similarly. Could someone shed light on this, as there seems to be very little resources to learn about $animateCSS. (google search for $animateCss returns results for animate.css which seems to be part of the earler angular js verion (v1.2) - so that doesn't help)
I had forgotten to inject "ngAnimate" to my module. That way the animation by $animateCss was not successful, so the done() was never called. But finally will be called even if the animation is not successful.
http://www.scientiamobile.com/page/angularwit
Want to be able to do something like this:
<img-wit ng-src="{{trustSrc(profile.pic)}}" w="100"/>
The picture isn't rendering however, although the blank space is sized correctly. Is it possible to use angular directive version of img-wit with ng-src?
UPDATE:
Determined the easiest way to use img-wit is not to implement angularjs directive at all. Instead, just append appropriate img-wit link prefix inside controller.
Support to ngSrc directive has been added in the 0.9.1 version: https://github.com/WURFL/angular-wurfl-image-tailor/releases/tag/0.9.1.
Syntax like the follow is now supported:
<img-wit ng-src="{{myUrl}}"></img-wit>
where {{myUrl}} is the url of the trusted image to load.
Please check https://github.com/WURFL/angular-wurfl-image-tailor#how-to-use-it for further details.
Disclaimer: I work for ScientiaMobile
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.