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
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'm trying to put together a library of custom AngularJS directives that show the live functioning component and underneath it the code snippet used to make that component. I want the example and snippet to be generated from one shared html pattern.
I tried building a directive that copies the content of the div from the example as a string, but by the time that directive runs the component directives have already digested and made alterations to the DOM, making it a bad representation of how to build that component.
I don't want to use a codepen type solution, since I want everything to be under my server and my control, but I'm drawing a blank on how to show example snippets pre-AngularJS alteration. There's no need to be able to have a live code editor, just something to copy snippets out of.
Let's say I have the following html in which masterdir and innerdir are custom directives:
<div master-dir>
<div inner-dir ng-repeat="x in set"></div>
</div>
How can I make the directives execute in the following order (without using $timeout, 'cause it looks ugly to me):
ng-repeat
n times innerdir
masterdir
Background: I want to alter the dom in every directive and the directives kind of depend on each other (the innerdir should alter the dom that ng-repeat produces and the masterdir should alter the dom produced by innerdir)
I've tried it with priority, require and pre/post/compile but I didn't find the right mix. I'm really out of ideas at this point.
In https://docs.angularjs.org/guide/compiler they say that, but none chart is there. Anyway, I found that in each directive docs page, in Directive Info section, the priority appears wrote like that (for ng-repeat):
ng-repeat:
Directive Info
This directive creates new scope.
This directive executes at priority level 1000.
I also found the next link that seems to be very helpful. I´m still reading it trying to learn (didn´t know too much about angular priorities). Hope this is helpful for you too.
http://www.bennadel.com/blog/2447-exploring-directive-controllers-compiling-linking-and-priority-in-angularjs.htm
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?