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?
Related
I'm using AngularJS ver. 1.6.8.
I have a component I have built called icons. To incorporate it in a page I just add <icons></icons> and the component is inserted into the page.
Now I have a scope variable that holds html, and part of that html is the previously mentioned code <icons></icons>.
When I use ng-bind-html it doesn't compile the component and instead just shows <icons></icons> as text.
I have tried using angular-bind-html-compile (link) but that didn't help.
All of the solutions I found seem to support angular pre made directives and not newly formed components.
Happy to hear of any possible solutions.
Did you do the following on your scope variable which holds the html code? This is a common mistake.
$scope.trustAsHtml('<div>....')
But as mentioned before, without your code it is hard to figure out the problem.
I have seen the demo to show pop-up
http://mobileangularui.com/demo/#/overlay
In the example has been used Directive into template
ui-turn-on="modal1"
I need to activate the pop-up from controller.
I think I have to use SharedState, but I was unable to create a working example.
Can you help me?
I had similar problem.
The following code solved my problem:
$rootScope.Ui.turnOn('modal1')
You need to declare the SharedState in the controller and then just use it like this:
SharedState.turnOn('name_of_modal_id');
and/or
SharedState.turnOff('name_of_modal_id');
Does not require anything special.
Its simple.
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.
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'm using the Reusable Click to Edit Directive from Icelab. I've used it successfully in several places in my app, but I run into problems when I try to edit elements that are inside other directives.
As the directives are calling the elements one by one, as in the following code:
<my-continent text='{{questions.n2A.answer.1.name}}' continent-id="1"></my-continent>
I don't see how can I implement the reusable directive in them, as it generates a general block of html code, not a specific one for each element called with the directive my continent.
I've created a Plunker where the problem is visible.
If I add the click-to-edit directive into my-continent, it breakes. You can see what I mean on line 47 of the html, when I add click-to-edit="questions.n2A.answer.1.name" onto the line as shown under.
<my-continent text='{{questions.n2A.answer.1.name}}' continent-id="1" click-to-edit="questions.n2A.answer.1.name"></my-continent>
Any idea about what am I missing?
Thanks!
I've used your plunker to check your problem and the moment I added click-to-edit to myContinent I've got an error in console linking to this:
Error on AngularJS
So basicly your code is not working because you create new scope in both directives. Hope that helps