How to send data from the Parent to the Child in the AngularJS

Question

How can I send the data from the Parent Controller (index) to the Child Controller (Component). Please see the example, instead of the hardcoding the

url

I want to send the parameters for the

Title

and the

URL

from the page controller to the component. I'm stuck to send it and I don't know where is the problem.

index.html

<div>

  <my-list obj="vm.obj"></my-list>

</div>

index.controller.js

this.obj = {

    testURL: "AngularJS",

    testName: "Testing Environment

}

mylistComponent.html

<span>{{vm.myTestName}}</span>

<a href="https://en.wikipedia.org/wiki/{{vm.myTestURL}}">AngularJS Wikipedia</a>

mylist.Component.js

binding: {

    obj: "="

}



this.goToPage = function() {

    this.myTestName = this.obj.testName;

    this.myTestURL = this.obj.testURL;

}

PLUNKER

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

In your plunker, by doing this :

<test-component value="vm.obj"> </test-component>

You put the value of obj in the var value. So in the child scope you can access to this value with the var value not anymore with obj.

Here is your plunker updated.

How to send data from the Parent to the Child in the AngularJS

Sign up