Advanced Directives with Angular JS (Part 1)

[@DavidMosher]

Here's a new screencast I recorded on Advanced Directives with Angular JS. Enjoy! :) #angularjs #screencast

[@ParsiMusik]

+David Mosher very useful thanks :)

[@DavidMosher]

I've started up again Jesse, I just published Part 2; look for more to come in the near future as well :) kzbin.info/www/bejne/aquqaYacqsiIsMk

[@keanubaker7421]

I realize it's quite randomly asking but does anybody know a good site to stream new movies online ?

[@lucafelipe2347]

@Keanu Baker I use Flixzone. You can find it on google :)

[@fabiantucker7992]

@Keanu Baker I use FlixZone. You can find it on google :)

[@gabrielbarroso4118]

Thank you so much! I'm an experienced Javascript developer, just wanted to know what we can do with Angular on a advanced level and this was great.

[@Lachezariii]

Dude, this is the best angular directives tutorial I''ve ever seen BY FAR!! Thanks for that! Take care

[@KevinCarbonaro]

Although I am still way far from understanding all of what you mentioned, your tutorial gave me a lot of practical pointers of what I should learn next to level up my custom directives. Thanks!

[@bebopwestern]

One of the best Angular videos out there. Great job!

[@TechWarriorz]

You sir are a beast, this is THE BEST video based on Directives that I have seen.

[@CienciaFiccionPeru]

Incredible tutorial of advance directives! Thanks so much for your collaboration :)

[@GiteshPurbia]

Nice tutorial. Now i have clear many doubts about directives.Thanks

[@srik9061]

This was a very illuminating talk. Thank you very much

[@DavidMosher]

Glad it was helpful Srikanth! :)

[@symmetri]

Great screencast! Thanks for taking the time, this is a tricky subject.

[@billlock9766]

Thank you for taking the time to do it right; great information!

[@jaykan111]

Hey David, great tutorials on leveraging AngularJS directives controller for delegating API for child directives. Quick correction on controller($scope) vs. link (scope), the "$" $scope in controller actually indicates that the scope value is being injected into the current context, but not all references to scope are based on the dependency injection (For instance, in $watch, link, and cloning functions) scope is always being passed as a positional argument, regardless of its name. From a functional perspective, it works the same way. Anyways great tutorials :)

[@DavidMosher]

Great point Jay Kan, thanks for clearing that up. I don't recall my exact wording but I think they are still the same scope instance in the end; the difference, as you've pointed out, is in how they get there (DI vs Positional Hardcoded Argument). :)

[@jaykan111]

***** Do you happen to cover how to toggle inner editor directive in your other tutorials or part II?

[@DomViking]

One of the better tutorials on youtube, thanks for making this video!

[@ChyngyzArystanuulu]

Thanks for the great tutorial David, it is very useful. Waiting for the second part.

[@adamkruppa6083]

Thank you very much David! Awesome video, please carry on, love your works and the way you give advice how to solve the problem, how to think about it and not just code.

[@DavidMosher]

You're welcome Ádám Kruppa, I'm glad you enjoyed the screencast :)

[@ArkinSturmdranger]

Very awesome guide, thanks. Hoping to write my own DSL using some of these concepts/ techniques.

[@ArkinSturmdranger]

It's kinda another way of saying "how do we craft an Absract Syntax Tree (AST)?", albeit we're still stuck in in v1 Angular, whereas the rest of the world's leaving us behind in v2 I suppose. heh, oh well, can't win em all.

[@arsal123]

A great custom directive learning. Love it.

[@lok_esh]

Awesome. I really like the way you have explained the concepts.. great tutorial :)

[@gauravkakkar87]

Thanks for creating this tutorial. Very helpful and informative!

[@ShrinivasanNeelamegam]

Great video David. I couldnt find any video in youtube that explains advanced directives this well. Could you post the link to the advanced directives part 2 which you mention in this video?

[@DavidMosher]

Hi Shrinivasan, I just published Part 2 today; a little late but better late than never right? ;) kzbin.info/www/bejne/aquqaYacqsiIsMk

[@brennenawana9826]

Awesome screencast! Thank you. Has the second video been published yet? I can't seem to find it.

[@DavidMosher]

Hi Brennen, I may be late to the party but I just published Part 2; check it out and let me know what you think :) kzbin.info/www/bejne/aquqaYacqsiIsMk

[@abrieljohngabriel8686]

Thanks David!. Very comprehensive but very clear as well. :)

[@DavidMosher]

Glad it was helpful Abriel :)

[@KalpeshPanchal]

Thanks David, Amazing screencast. We can achieve the desired functionality without jQuery as angular comes with jQueryLite.

[@pimisi]

Great tutorial. Really insightful. Quick question... How did you deal with the bug of the repetition of the editor rows?

[@myyellowdog]

Wow! Great video. I just learned more about directives than I learned from reading "AngularJS Up and Running," which is actually a pretty great book, so no small feat! I also loved how you showed us the techniques for building up one step at a time and hunting bugs when the code wasn't perfect-an inevitable aspect of the job. The $0 trick alone will undoubtedly save me tons of time in the future. Quick question: why did you have to use compile for the editor initializer bit? (This might be obvious to me as I work through the code myself in the morning, so please forgive this possibly premature question.) Thank you so much for sharing your knowledge. You da man! I am searching now for your other videos.

[@Awesomo4000]

@37:25 A comment can be used for a directive (exampleDirective), if the restrict is set to M. So it seems logical that a comment is seen as an element. Not sure why it exists however.

[@chenrvn]

First of all thanks for sharing. It great screen cast, love your learning way. Second, regard to pre and post link it work fine/as excpected because the column grid is the leaf so it dosnt care for the order. If u will put pre on directive parent such grid-columns so than he will run the linkin function first. U can use also the order number of the directive but u need to put extra care regard this method :-) (u know that). Once again thanks a lot for this video men.

[@DavidMosher]

Ah yes, thanks for that Chen Reuven, I forgot you have to use the pre/post on the parent element to determine child linking order :D

[@chenrvn]

***** one more thing. i put console.log to see the function execution ordewr and i see something strange. this is the output: gridScreen controller... gridColumns controller... gridColumn link... gridColumns link... gridScreen link... grid controller... withInlineEditor link... editorInitializer controller... editorInitializer link... editorInitializer controller... editorInitializer link... editorInitializer controller... editorInitializer link... How can be that gridScreen link is call before is child? moreover how can be that grid controller is called after the link function of the grid? Thanks:) - i have image but i cannot upload it here there is no such function here...

[@AkshayKadu]

Nicely explained. Thanks for sharing.

[@aleixsuau867]

Great video David, thank you very much!

[@alexfrolov7546]

Great tutorial. David, why did you stop publishing videos ?

[@DavidMosher]

Hi Alex, I took a bit of a break but I intend to start publishing again. I started today by pushing Part 2 of this series! kzbin.info/www/bejne/aquqaYacqsiIsMk

[@alexfrolov7546]

\0/

[@JorgeCorradi]

Man, I can not thank you enough... You rock!!

[@ParthDaveIn]

Very nice explanation. But I could not find Part 2. Can you please post a link?

[@DavidMosher]

Hi Parth, Part 2 just got published today :) kzbin.info/www/bejne/aquqaYacqsiIsMk

[@KevinCarbonaro]

I am now trying to create a sortable attribute however I cannot find a way to bind a click function to the column header yet. This is my directive so far (does not work) .directive('sortable', ['$compile', function($compile) { return { restrict: 'A', compile: function(el) { el.removeAttr('sortable'); el.attr('ng-click', function() { console.log('clicked'); }); var fn = $compile(el); return function(scope){ fn(scope); }; } } }])

[@zoranvulanovic3780]

Great tutorial. Clear and understandable for everyone who know basic of angular. I think your pre and post did not work because is living in link function. Pre and post must live compile function i guess.

[@sridharkorrapati6232]

Need help in creating angular directive using JQXTreeGrid widget. With column and pagination

[@antonzizic3483]

very usefull vid to help understanding directives. thank you !!!

[@ranostaj-dev]

how you decide which functionality goes into Controller and which into Link function?

[@petestorey2557]

jan ranostaj The link function is called when the directive is first used in the view and can initialise/edit the dom elements and attributes, set up/access scoped variables and can access controllers. The controller is used to hold all of your other variables and functions that are accessible via expressions in your views like in simpler angular applications or templates specified in templateUrl.

[@ehguacho2008]

amazing bro, i've learned a lot thru this vid. thanks a lot (:

[@sriharsha1150]

How did the grid-screen and gridScreen get mapped?

[@Suamere]

That is just a convention in AngularJS. Wherever there is a Capital Letter between words, a dash is added instead. soThisVariableHere becomes so-this-variable-here. Don't need to worry about how, that's the point of Conventions.

[@MrNSundar]

hi nice tutorial..$(editor).insertAfter(element.parents("tr")) this line is giving me Cannot read property 'ownerDocument' of undefined..

[@adamkruppa6083]

While doing the extra credit, what u mentioned at the end of the vid, I ran to a problem, probably it's easy, but if i trigger the arrows, and I want the other arrows to auto close if it was open, then, how can I do that? Tried with ng-blur too but couldn't broadcast 2 events(ng-click didn't work then) and don't know if it is possible or it is a bad pattern to reach attributes of sibling directives. So can you give me a hint, how to to that? If this is on topic and you have time for this.

[@DavidMosher]

Hey Ádám Kruppa I Would love to see a github pull request or gist with some of your code, easier to visualize that way and perhaps we could come up with a solution together? :)

[@adamkruppa6083]

***** Solved the problem, just needed to rethink it, started to learn Angular about a month ago, so still have questions in my head made a pull request. And I am really interested in your opinion, because I assume you would have done it differently and better. :)

[@AshkonHemmati]

You sir, are an absolute beast!

[@jamesbarrow]

Thank you so much for this, it was a great tutorial, I learned a lot! High five!

[@KevinCarbonaro]

My json rows have sub objects such as 'Employee.DisplayName', so naturally I am adding that as a column field. However it does not seem to be able to render anything with {{row[column.field]}}. When I remove the '.DisplayName' I do get the following data returned as an Employee row: {"Department":"Management","DisplayName":"Jackie"} Maybe someone out there can point me to why it is happening.

[@KevinCarbonaro]

I managed to work around it by extracting only the data needed by the columns field dynamically into the rows array.

[@HolyShoyo]

Thanks for tutorial. Great example.

[@VishalKumarTech]

Very helpful. Thank you so much!

[@gaurav63105]

i superliked this,thanks man ,you were super helpful

[@samehghanmi4487]

Thank you David. Subscribed.

[@niculistana7227]

Very well done! Thank you.

[@ratnesh1104]

1 correction regarding the order of pre-link and post-link phase. Overall logic is as: 1. Compile method is invoked in the way the tree is traversed. 2. During linking phase, the traversing happens in the same way the tree traversing do with following algorithm: i) If element has pre-link, invoke it. ii) If it has child element, and post-link method. Go down the tree without invoking post-link. iii) If the element doesn't have any child node/element, and has post-link method then invoke post-link. So any element without child and having both pre and post linking method get executed at the same time as: pre-link->post-link, as it is "gridColumn" in your case. iv) Once child linking method gets invoked, go up the tree, and invoke post method of the parent.

[@nadavmor4841]

web developer from the future: wow, i don't miss those days...

[@DavidMosher]

nadav mor 🤣 ain’t that the truth!

[@codrinf]

great tutorial!

[@sijimathew9982]

thank you sir.

[@valikonen]

Very nice example, but now I understand why React is so popular, is much easier, much clean...

[@richardlucas8666]

It would have been helpful for you to show the desired end result before you jumped into writing the code

[@iVish]

Nice post

[@vyacheslavzgordan6725]

Thank you!

[@mendykatz9199]

part II pleaseeeeeeeeeee

[@DavidMosher]

Hi Mendy, I just finished publishing Part 2! Check it out and let me know what you think :) kzbin.info/www/bejne/aquqaYacqsiIsMk

[@pramodrathod007]

gr8 tutorial !!

[@suhas.deshpande]

You rock.