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

Did you check https://stackoverflow.com/questions/31225744/in-angular-js-how-do-i-pass-data-from-a-parent-controller-to-a-child-controller? — , Aug 17 '17 at 13:07
http://www.c-sharpcorner.com/blogs/pass-data-from-parent-controller-to-child-controller — , Aug 17 '17 at 13:08
You can broadcast events with $rootscope.$broadcast and listen to it by $rootscope.$on , by that way you can pass data from one component to another, there are few other methods too, You can have a shared factories to pass the data. — sivaram636, Aug 17 '17 at 13:09
@slacker Thanks, but I want to use the `binding` data, instead of the service, etc. — GeoCom, Aug 17 '17 at 13:09
@sivaram636 You should not use rootscope for this. As this is a parent to child situation you can just emit and broadcast on the scope. — Marcus Höglund, Aug 17 '17 at 13:10
@Milban Have you tried to use `$parent` to access to the parent scope ? — JeanJacques, Aug 17 '17 at 13:13
Somehow I am forced to use the data binding method, therefore I didn't test other way. — GeoCom, Aug 17 '17 at 13:15
Could you try to create a Plunker to make it easier for us to help you ? — JeanJacques, Aug 17 '17 at 13:16
@MarcusH yeah agree we don't need to use $rootscope here , scope is enough to achieve it — sivaram636, Aug 17 '17 at 13:19

score 1 · Accepted Answer · answered Aug 17 '17 at 13:27

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.

answered Aug 17 '17 at 13:27

JeanJacques

1,754
1
12
25

Thanks, how can I assign the the value in component controller, because when I assign it, it stops working. ex. `ctrl.testObj = ctrl.value.a` https://plnkr.co/edit/0kvexzKZKaHZ6PlUGaNk?p=preview – GeoCom Aug 17 '17 at 13:45
It's because when you try to assign `ctrl.value.a` to `ctrl.testObj`, `ctrl.value` is still not set in the child scope so `value` is undifined. You can add a **timeout** around your assignation, but there is probably a proper solution – JeanJacques Aug 17 '17 at 13:58
1

@Milban Ok, I think a found how to achieve this. You can use $onInit to assign `ctrl.value.a` to `ctrl.testObj`. [Here](https://plnkr.co/edit/lNGv8GqfuGxH4j5yyjGL?p=preview) is your plunker updated. – JeanJacques Aug 17 '17 at 14:04
Thanks, you saved my time, can you also look at this question https://stackoverflow.com/questions/45593764/how-to-validate-form-in-angularjs-1-x-component – GeoCom Aug 17 '17 at 15:24

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

1 Answers1