component communication angularjs 1.6

Question

I need to implement component communication between two independent components. I have used require keyword but it throws an error

Error: $compile:ctreq Missing Required Controller
Controller 'cone', required by directive 'ctwo', can't be found!

this is my code

angular.module("app", [])
  .component('cone', {
    template: '<p>Component one</p>',
    controller: function() {
      console.log("component one loaded")
      this.fone = function() {
        console.log("component one function one")
      }
    }
  })
  .component('ctwo', {
    template: '<p>Component two</p>',
    controller: function() {
      console.log("component two loaded")
    },
    require: {
      cone: 'cone'
    }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div ng-app="app">
  <cone></cone>
  <ctwo></ctwo>
</div>

is am doing wrong? any idea ?

https://stackoverflow.com/questions/38698953/angularjs-pass-data-from-controller-to-controller-without-factory-service-or/38699338#38699338 — gyc, Apr 09 '18 at 08:27

score 3 · Accepted Answer · answered Apr 09 '18 at 08:47

For component 2 to call component 1 functions you need to make component 2 a child of component 1. Either in the component 1 template or by transclusion:

angular.module("app", [])
  .component('cone', {
    transclude: true,
    template: '<p>Component one</p><ng-transclude></ng-transclude>',
    controller: function() {
      console.log("component one loaded")
      this.fone = function() {
        console.log("component one function one")
      }
    }
  })
  .component('ctwo', {
    template: '<p>Component two</p>',
    controller: function() {
      var vm = this;
      console.log("component two loaded");
      this.$onInit = function () {
        console.log('calling fone from ctwo! ---->');
        this.cone.fone();
      };
    },
    require: {
      cone: '^^cone'
    }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div ng-app="app">
  <cone>
    <ctwo></ctwo>
  </cone>
</div>

score 0 · Answer 2 · answered Apr 09 '18 at 08:14

use, require: '^cone',

angular.module("app", [])
      .component('cone', {
        template: '<p>Component one</p>',
        controller: function() {
          console.log("component one loaded")
          this.fone = function() {
            console.log("component one function one")
          }
        }
      })
      .component('ctwo', {
        template: '<p>Component two</p>',
        controller: function() {
          console.log("component two loaded")
        },
        require: '^cone',
      })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div ng-app="app">
  <cone></cone>
  <ctwo></ctwo>
</div>

Here is Fiddle link

how can i call `cone` function `fone` from `ctwo` ? – Ebin Manuval Apr 09 '18 at 08:17 — Ebin Manuval, Apr 09 '18 at 08:17
@EbinManuval you can't, ctwo needs to be a child of cone – gyc Apr 09 '18 at 08:25 — gyc, Apr 09 '18 at 08:25

component communication angularjs 1.6

2 Answers2