JSFiddle - React, Tailwind, and code Playground

by Chris Bao

HTML

<div ng-app="app">
  <div ng-controller="ParentCtrl as parent">
      <foo-directive data="parent.city" tab-click="parent.tClick"></foo-directive>
  </div>
</div>

CSS

</style>
<script src="//code.angularjs.org/1.6.2/angular.min.js"></script>
<style>

JavaScript

function ParentCtrl($timeout){
	this.city= "London";
	this.tClick = function(){
  	console.log("debugging parent tclick...")
  }
}

function FirstCtrl() {
  this.$onInit = function(){
   		this.click = function(){
    		this.tabClick();
    }
  }


}

function fooDirective() {
	return {
  	scope: {
    	data: '=',
			tabClick : "&"
    },
    controller: 'FirstCtrl',
    controllerAs: 'foo',
    bindToController: true,
    template: '<div ng-click="foo.click()">{{ foo.data }}</div>',
    link: function ($scope, $element, $attrs, $ctrl) {
    	//console.log($ctrl.name);
    }
  };
}

angular
	.module('app', [])
  .directive('fooDirective', fooDirective)
  .controller('FirstCtrl', FirstCtrl)
  .controller('ParentCtrl',ParentCtrl)