angularjs test 2: inter-directive communication

by Richard Hunter

HTML

<div ng-app="myApp" ng-controller="MyController">
  <h1>Angular experiment: inter directive communication</h1>

  <rh-foo rh-bar="this is bar" rh-meh=""></rh-foo>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js" integrity="sha512-klc+qN5PPscoGxSzFpetVsCr9sryi2e2vHwZKq43FdFyhSAa7vAqog/Ifl8tzg/8mBZiG2MAKhyjH5oPJp65EA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div>
the controller of a directive provides a kind of model for the controller which can be accessed by other directives
</div>

CSS

.foo {
  background: hotpink;
  padding: 10px;
}

JavaScript

angular.module('myApp', [])
  .controller('MyController', ['$scope', (scope) => {
    scope.title = 'inter directive communication';
  }])
  .directive('rhFoo', () => {
    return {
      template: `
      	<div class="foo">
        	title: {{title}}
        </div>
      `,

      controller: function() {
        this.footballTeam = 'Scotland';
      }
    }
  })
  .directive('rhMeh', () => {
    return {
      restrict: 'A',
      controller: function() {
       this.name = 'meh'
      }
    };
  })
  .directive('rhBar', () => {
    return {
      restrict: 'A',
      require: {
        foo: '^rhFoo',
        meh: '^rhMeh',
      },
      link: (scope, element, attributes, controller) => {
        console.log('bar', controller);
      }
    };
  });