Simple directive

by Uday Hiwarale

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp">
  <vehicle></vehicle>
</div>

JavaScript

angular
.module('myApp', [])
.component('vehicle', {
	controller : function(){
		this.break = function(){
			console.log('Vehicle stopped!');
		}
	},
	template : '<car></car>'
})
.component('car', {
	require : {
		vehicle : '^vehicle'
	},
	controller : function(){
		this.tiresCount = 4;
    	
    	this.$onInit = function(){
    		this.vehicle.break();
    	}
	},
	template : '<b>I am car with {{$ctrl.tiresCount}} tires.</b>'
});