Send input value to a separate component on button press - AngularJS

Question

I have two components both linked to the same module:

angular.module('app', []);

The first Component is a simple input field and button

angular.module('app').component('myInput', {

    template: '<input data-ng-model="$ctrl.value"/>' +
              '<button data-ng-click="$ctrl.post()">Post</button>',

    controller: function MyInputController(){
        this.value = "";
        this.post = function(){
            // get this.value from input and send to other component
        };
    }

});

The second component is just a repeating P tag based on an array in the controller

angular.module('app').component('myOutput', {

    template: '<p data-ng-repeat="item in $ctrl.data">{{ item.value }}</p>',

    controller: function MyOutputController(){
        this.data = [{value: "Example Data"}];
        /* 
           When this receives the data from the other component
           it will push() it into this.data
        */
    }
});

How do I get the $ctrl.post() method of the <my-input/> component to send data to the other <my-output/> component so that it can push() it into it's data array and be picked up by the data-ng-repeat?

Alernatively, is it possible to push() directly into the other component's controller.data array?

I mean, they are both just normal old Objects when it comes down to it!

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

In order to pass data between different scopes you can:

1) Store this data in angularjs service(provider) and inject it via DI in your controllers. In my opinion it is the best way if your components are located far from each other.

2) Use scope propagation ($scope.emit() or $scope.broadcast()) to send and receive data between different scopes. But I don't think it's a good idea if your components are not in "ancestor <-> descendant" relationship. In your case you can create a parent controller for both of your controllers to which you'll send data from my-input component, catch it via $scope.on() and then send to my-output. Otherwise you can use $rootScope to communicate between your components.

3) Use data binding between parent and child scope of directive/component (for more details read this). In you case it is also not a very good idea considering your components are not parent and child.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 26, 2017 at 12:48

GProst

10.3k3 gold badges28 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Panomosh Over a year ago

Ah I see, thanks @GProst. Looks like I am going about this in the wrong way then. I imagined the process to be similar to that of ReactJS where passing information between components is relatively simple. Is it preferred practice to use parent / child propagation with $broadcast and $emit rather than using the $rootscope?

GProst Over a year ago

Don't know about these two practices, but I prefer to avoid broadcasts as such, especially on long distances. Because it's hard to debug and maintain later. You need to look for all of this path of events, which may be confusing. So I use services and data binding between parent and child (one-way data binding is more preferred).

Collectives™ on Stack Overflow

Send input value to a separate component on button press - AngularJS

1 Answer 1

In order to pass data between different scopes you can:

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

In order to pass data between different scopes you can:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related