I start learning the first angular and for a long time stuck on the problem of buying. Immediately attach all your code: https://plnkr.co/edit/irj9iZiWYY6ctZph3Cwb

By the structure of the project, it is clear that the parent component outputs data, and the child component (being a parent dependency) performs the role of adding new data.

The method of adding new data remains in parent, since This component of mine is considered “smart” and stores data.

<child-add on-add="$ctrl.appendData()" />

In the child element, I pass this callback to call it when submitting the form for adding new data. In the child.component.js file in the onSubmit function onSubmit I want to call ctrl.onAdd , but as I understand it, I cannot send new data there with an argument ( read here )

Question: how then to transfer data from child to parent component? I want to immediately learn how to do it right.

And one more thing: if I don’t use ES6 syntax (classes), do I design the code correctly? Is it worth this call ctrl to use it in functions? Functions like onSubmit worth writing right inside the controller function?

Thank.

    1 answer 1

    You can pass any parameters.

    child.component.js

     function onSubmit() { ctrl.onAdd({text: ctrl.formData.text}); }

    parent.component.js

     <child-add on-add="$ctrl.appendData(text)" />

    Next, in the controller, your parameter will be passed to the appendData function.

    If you use es6, then there is no need for ctrl for 2 reasons:

    1. Now ctrl needs to be defined in every class method, which is very inconvenient
    2. In es6 there is => (fat-arrow) which allows you to bind the call context and inside the function we will have the "correct" this