I've added a new element to the DOM and set it with ng-model attribute.
Since this element didn't exist when document loaded when angular did his stuff the binding doesn't work.
How can I manually add this element to be handled with angular?
I'm sure it has been asked before but I didn't manage to find the answer...
Thanks in advance!
Essentially you'd have to use $scope.$apply().
There's a fine article on this here.
EDIT:
Also, there's another question here on StackOverflow that might help. Maybe you need to use $scope.$watch() to listen for events and only then, use $scope.$apply()
Check out the question here.
after creating the element at the controller code i used
$compile(element)($scope)
and it worked.
Related
I'm really struggling integrating jsPlumb into Angular.
I need to make some elements draggable, and I have no problem if I create a static HTML.
The problem comes when I create components dynamically, jsPlumb just seems to ignore those. I made sure to have the id properly set, but no luck.
As it is a bit difficult to explain I made an example, which you can find here: example demo
Any help would be much appreciated, thanks in advance
I solved it calling the jsPlumb draggable() method in the ngAfterViewInit life cycle of the newly created component.
I'll post the link to the demo in case someone needs it: jsPlumb demo
I am coming from a different development background with a very little jQuery and/or shieldUI knowledge. Can someone please very shortly explain how to remove/destroy shieldUI components or widgets? I don't see any special widget method therefore I assume this is done with jQuery. By destroying I mean removing everything down to (including) markup.
Also, what happenes with widget when calling hide()? I see that markup is somehow stripped down (removed), but some wrappers remain. Is it safe to call another widget setup with the same "id" ? will it overwrite? will it cause object orhpans?
As you see I am missing some very basic "how it works". I am a quick learner so please, just few basic pointers will do. Thank you :)
EDIT: found destroy widget method under "swidget()"...what is swidget?
swidget() gives you a reference to the component instance, through which you can access methods and properties, such as height, width, refresh(), destroy(), etc.
Further, with respect to the question at hand, regarding the destroy method and approach - the ideas is, that whenever you need to refresh some data on the component, you can recreate it, rather than calling a method such as rebind.
This is demonstrated in the following demo:
http://demos.shieldui.com/web/rangebar-chart/related-charts
Found out about vue.js and would like to rewrite some part of my jQuery code to vue. My problem is about handling the elements that are dynamically created.
If it was being written on jQuery, .on() on a parent element would work. Unfortunately, this doesn't work on Vue.js
I found a similar case here: http://forum.vuejs.org/topic/151/vue-js-not-listening-to-dynamically-created-elements/4
evan the creator replied:
You can't, because Vue doesn't work this way. Use v-if and components, don't add HTML on the fly.
I did not get it and can't find any help regarding this. Rewriting everything to vue would take a lot of time. Would like jQuery and vue to work together.
Again, How do I handle events of elements that are being created dynamically?
I was working on an angular app (phonegap+ionic+angular), I had written a custom directive which registered an event listener for that element (which would activate iScroll for that element on load event). The directive was working fine when all the view was in index.html. I decided to refactor the code and intorduced nested views and routes using ui-router. Now the directive seems to be not functioning. I tried making a mock directive that would just console.log() and nothing happened.
Am I missing something here?
Any kind of help or lead would be highly appreciated.
Thanks.
I have found the problem and the solution to my problem. I'm posting here so that others facing similar problems could benefit from it.
Turns out, since my directive did not run because it was executed before the sub view was loaded. So I solved the problem by just adding a
scope.$watch("$viewContentLoaded") wrapper around my directive's codes and it started working.
I am new to Angular JS and starting to work on creating custom directives for one of our projects. Part of the requirement is to create an angular tree and I have took the code from a sample plunkr created by some one. It is not my code and I tried to extend it.
I have to call the controller method with arguments from the directive. I tried with answers on the stack overflow but couldn't solve the issue I am facing. It seems some where I am making a mistake in the recursive calling. The controller method is being called but the argument is undefined. Below is the plnkr code I have.
http://plnkr.co/edit/76iQdnLQyu4k9cn4eId5?p=preview
I appreciate your help on this.
Thanks,
veera
In the choiceTree directive's template change:
getauditchildren="getchildren(choice.procID)"
To:
getauditchildren="getchildren({ currentNodeId: choice.procID })
Demo: http://plnkr.co/edit/fuMCQ9kSWN6Itxzmehth?p=preview
This does not work when you have multiple levels.
It returns the id of the first level always.
here is a plunker link
getchildren="getauditchildren(currentNodeId)" //should be changed?