javascriptangularjsangularjs-scopeangularjs-bindings

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


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


Solution

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