Container and Presentation Components Using Angular Component Bindings
Angular 2 introduces the concept of inputs and outputs as a mechanism for components to communicate. The most significant advantage of this is that we can create presentation components that are void of any imperative logic as they rely entirely on their parent container component. We will learn how to create inputs and outputs in Angular 1 using isolated scope and the component binding syntax.
Actually this clip misses a small information about a default controller which is mentioned in previous posts. For people who did see angular documentation (before watching the lesson) it could not be so obvious from were this controller come from. Especially that w rename it by controllerAs. I could be a small statement that $ctrl is a default controller for all components and in this specific example we will take this default and rename it to .....
Why do you pass in an object in the .selected callback ( categoryItemCtrl.selected({category: categoryItemCtrl.category}) ) when you can pass in the categoryItemCtrl.category? This does not make any sense to me. Please explain.
This is one of the idiosyncrasies of expression binding... in order to pass values to the parent component, you have to do so via an object map. This is necessary because of how Angular is parsing what is essentially a string and turning it into a callable function.
From the documentation...
Often it's desirable to pass data from the isolated scope via an expression to the parent scope. This can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).