JSFiddle - React, Tailwind, and code Playground

by Chris Bao

HTML

<div ng-app="app">
    <foo-directive ctrl="FirstCtrl"></foo-directive>
    <foo-directive ctrl="SecondCtrl"></foo-directive>
</div>

CSS

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

JavaScript

function FirstCtrl() {
	this.name = 'First Controller';
}

function SecondCtrl() {
this.name = 'Second Controller';
}

function fooDirective() {
	return {
  	scope: {},
    name: 'ctrl',
    controller: '@',
    controllerAs: 'foo',
    template: '<div>{{ foo.name }}</div>',
    link: function ($scope, $element, $attrs, $ctrl) {
    	console.log($ctrl.name);
    }
  };
}

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