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”).

components

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”.

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s