Angular 1.6 Binding Functions

Binding functions in Angular tripping you up?

Passing function and method bindings between components can be challenging unless you really think about what’s going on in each step and have an understanding of higher order functions.

Here I’m tackling using ng-click on a view with it making changes to the parent that is 3 levels up. This (with additional code, not shown) produces a component box with a clickable label, on a flex grid. The flex grid itself is also a component that lives on the parent template.

In this diagram, I specifically named each binding differently so you could see the progression through the components. The main idea to remember is to pass an object from the view {ein: ‘123’}. Then for each binding, you must use the key name (“ein”).

The folder architecture would look something like this:

• app
  • equipment-dashboard
    • equipment-dashboard.controller (1-controller-parent)
    • equipment-dashboard.html (1-template)
    • components
      • equipment-flex
        • equipment-flex.component (2-controller)
        • equipment-flex.html (2-template)
  • components
    • equipment-generic
      • equipment-generic.component (3-controller)
      • equipment-generic.html (3-view)

**NOTE: “equipment-generic” is under “app > components” and not under “app > equipment dashboard > components > equipment-flex > components” because it’s re-used by many areas of the site, but it could easily have been listed under “equipment-flex > components”.