Passing data between components in AngularJS

Question

I'm having trouble linking two brother components in angularJS without using a service. I saw examples but I can not make them work. This is what I have. What am I failing? Thanks!

cluster.js

<div class="row">
    <filter-component></filter-component>
    <result-component filters="$ctrl.filters"></result-component>
</div>

filter.component.js

'use strict';
    angular
        .module('filter' , ['ui.bootstrap'])
        .component('filterComponent', {
            bindings: {},
            templateUrl : 'app/filter/filter.html',
            controller : filterCtrl
        })


        function filterCtrl($scope){
            this.filters = 'FILTRO' // <-- I give it a value
        }

results.component.js

(function(){
    'use strict';
        angular
            .module('result')
            .component('resultComponent', {
                bindings: {
                    filters :'<' // <-- inject
                },
                templateUrl : 'app/result/result.html',
                controller : resultCtrl
            })


            function resultCtrl($scope) {}

result.html

<h1>{{$ctrl.filters}}</h1> //<-- nothing is shown :(

You are passing `$ctrl.filters` outside of `` , so your variable wont exist. If you want to pass a value from component only, you need to create a `parent` & `child` type components. Else use service or `events` — Shashank Vivek, Jul 30 '18 at 15:54
Take a look at https://stackoverflow.com/questions/50390843/angularjs-pass-grandparent-to-grandson-with-components/50391049#50391049. Feel free to upvote it as well ;) — Shashank Vivek, Jul 30 '18 at 15:55
The AngularJS team introduced components with V1.5 to make the transition to Angular 2+ easier. Injecting and using $scope defeats that purpose as Angular 2+ doesn't have $scope. — georgeawg, Aug 01 '18 at 18:37

georgeawg · Answer 1 · 2018-07-30T19:25:36.943

0

Use an attribute with expression binding in the HTML:

<div class="row">
    <filter-component on-update="$ctrl.filters=$filters">
    </filter-component>
    <result-component filters="$ctrl.filters">
    </result-component>
</div>

Use expression binding with & in <filter-component>:

app.component('filterComponent', {
    bindings: {onUpdate: "&"},
    templateUrl : 'app/filter/filter.html',
    controller : filterCtrl
})

function filterCtrl() {
    this.filters = 'FILTRO' // <-- I give it a value
    this.onUpdate({$filters: this.filters});
}

For more information, see

edited Jul 30 '18 at 19:25

answered Jul 30 '18 at 19:11

georgeawg

48,608
13
72
95

Hi guys, thanks! Finally i use $broadcast, $on y $emit and it seems to work, but all the answers were very useful. – Phil Aug 01 '18 at 18:08
@Pil Use of the scope/rootScope event bus with `$broadcast`, `$emit`, and `$on` is deprecated and will make migration to Angular 2+ more difficult. See [AngularJS 1.5+ Components do not support Watchers, what is the work around?](https://stackoverflow.com/questions/35534479/angularjs-1-5-components-do-not-support-watchers-what-is-the-work-around/35535336#35535336). The AngularJS team introduced components with V1.5 to make the transition to Angular 2+ easier. Injecting `$scope` and its event bus defeats that purpose. – georgeawg Aug 01 '18 at 18:31
@georgewg, finally i change my code and create parent & child type components, thanks! :) – Phil Aug 09 '18 at 21:57

Passing data between components in AngularJS

1 Answers1