Tips on passing data between components in AngularJS

Tips on passing data between components in AngularJS  #javascript

  • Tips on passing data between components in AngularJSPlus bonus tips on escapingTypically in Angular, you have a main view, and multiple models.
  • Life is great until you have one function written in the main view that is supposed to manipulate the content in a child model.
  • For those who are unfamiliar with Angular, passing data between the components is often confusing.At the end of this article, there are some bonus tips on getting rid of the errors that often pop up when concatenating links.The Starter Code:It all starts with the main view.
  • –other components–/div$ctrls  bindingsLet’s start with a diagram:Follow the arrows from “View” on the far leftHere’s the flow in words:You start with the main view (top left), and declare the data that you want to pass down to the child components.In the main view’s HTML, use the $ctrl to access data inside the controller at the model (ModelOne in the diagram) that you want to pass data to.Inside the .component in the model that you just passed data into (ModelOne), use the same name as you declared in the HTML (‘data’) and add it into a bindings object (note: bindings, plural).
  • ‘’: Pass a function or method with the ‘’ to let the child component have access to that function.Read the docs here for more information.Bonus: XSS escaping and interpolating linksRendering youtube videos, for example, require you to interpolate the main link together with the video id that you get from the youtube api.

Typically in Angular, you have a main view, and multiple models. Life is great until you have one function written in the main view that is supposed to manipulate the content in a child model. How do…

@ng_real_ninja: Tips on passing data between components in AngularJS #javascript

Typically in Angular, you have a main view, and multiple models. Life is great until you have one function written in the main view that is supposed to manipulate the content in a child model. How do you do pass that function to the child component? For those who are unfamiliar with Angular, passing data between the components is often confusing.

At the end of this article, there are some bonus tips on getting rid of the errors that often pop up when concatenating links.

It all starts with the main view. You probably have something like this:

controller: ‘appCtrl’

and in your models you probably have this:

You probably also have some templates:

Let’s start with a diagram:

Here’s the flow in words:

‘<’: This is a one directional binding. It is used for passing data and states down to child components. Sometimes it can be a source of bugs when you change a state at the child component and expect the parent component to reflect the change. It may not work the way you expect it to. for interpolated values. ‘&’: Pass a function or method with the ‘&’ to let the child component have access to that function. Rendering youtube videos, for example, require you to interpolate the main link together with the video id that you get from the youtube api. It seems pretty straight forward until you notice the browser throwing an error when you do something like this: The problem: angular has a very strict XSS protection mechanism.  Here’s the solution:

Tips on passing data between components in AngularJS

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.