Working with isolated scope in directives can be a bit confusing so I wanted to take this opportunity to try to explain how to interact with isolated scope in the simplest terms possible.
You can download the full-sized infographic at http://bit.ly/isolated-scope-infographic and see the companion code examples at http://bit.ly/isolated-scope.
I really hope that you find the infographic and code examples helpful. Be sure to drop me a line below if you have any questions or comments. #highFive
A huge #highFive to my buddies Kent C. Dodds and Peter Traeg for providing great feedback on improving my wording so it is more precise and easier to understand.
Great article, nice work.
Thanks! #highFive
This is the best and simplest explanation on directives scope I ever read. Thank you !
On your sample code, why do you still have the $scope injected if you are already using the ‘controller as’ syntax? Thanks and really clear example.
Gah! Ghosts in the code! Fixed and thanks for pointing that out. +1
@Lukas – Your final samples – especially the “With an Expression” demo – would be much more instructional if you also provided the code with syntax highlighting (highlight.js?) right below each demo.
@Thomas – you are so high maintenance! 😀 Actually that is a great idea… let me work that in. #highFive
It’s just great example! Thanks!
Thanks,
Very helpful,
Question regarding the localExpression –
To know the parameter passed into the expression is “message” I have to look into the implementation, correct?
That is correct but this is where good API documentation is handy.
Great illustrations + explanation+ example, Had been trying to understand isolated scope for couple of hours now, The illustrations here makes understanding isolate scope so intuitive.
Great work!!!
When using an expression with isolate scope, would the ng-click be placed on the directive template?
In the case of the plunk, yes. We are using ngClick to fire localExpression which then fires whatever parent expression we define in our HTML. Think of localExpression as simply a patch cable from an internal method call to an external method call. Does this make sense?
Now it’s crystal clear, thanks 🙂
Simple and Awesome!
The best article I have read regarding AngularJS Directive Isolated Scope!
Thanks! #highFive
Terry – Glad you liked it! I have a few more of these planned for Angular 2. Stay tuned!
#HighFive, #thanks
#HighFive! 😀
Very easy to understand explanation thanks heap!