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" ng-controller="myCtrl">
	<car tires="tires" increment-tires="increment()"></car>
</div>

JavaScript

angular
	.module('myApp', [])
	.controller('myCtrl', function($scope){
		$scope.tires = 2;
    $scope.increment = function(){
    	$scope.tires += 1;
    };
	})
	.component('car', {
		bindings : {
			tiresCount : '<tires',
      incrementTires : '&'
		},
		template : '<b>I am car with {{$ctrl.tiresCount}} tires.</b> <button ng-click="$ctrl.incrementTires()">Increment Tires</button>'
	});