directive all features

by Samar Pattanayak

HTML

<div ng-app="ang">
	<div ng-controller="myc">
		{{msg}}
		<div>
			<span>Input Text Directive Example</span>
			<div>
				
				<input type="text" ng-model="msg" ng-model-options="{debounce : 500,updateOn : 'blur'}" first="one" second={{two}} third="three()" meth="funConController()" name="ch" class="check" required my-directive/>
			</div>
			<span>Div Directive Demo</span>
			<div>
				
				<my-directive ng-model="msg">(Hii From hTML)</my-directive>
			</div>
			
		</div>
		<span>
		<button ng-click="changeModel()">
		Change HERE
		</button></span>
	</div>
</div>

JavaScript

var ang=angular.module("ang",[]);

ang.config(function($compileProvider,$httpProvider){
	$compileProvider.debugInfoEnabled(false);
	$httpProvider.useApplyAsync(true);
})

ang.controller("myc", function($scope){
	$scope.msg="Here is starts";
	$scope.one= "111111";
	$scope.two ="222222";
	$scope.three = function (){
		console.log($scope.one + $scope.two);
	};
	$scope.changeModel = function(){
		//$scope.msg="";
		$scope.msg = ` ${Math.random().toFixed(2)}, ${$scope.msg}`;
	}
	$scope.funConController=  function(){
				console.log("text contains # now and its called from MAIN Controller");
			}
})

ang.directive("myDirective", function(){
	return {
		restrict :"EA",
		require : "ngModel",
		scope : {
			first : "=",
			second : "@",
			third : "&",
			meth : "&"
		},
		template : '<span>Just piece of text from Directive</span><ng-transclude></ng-transclude>',
		transclude : true,
		controller: function($scope){
			$scope.funDivController=  function(){
				console.log("text contains @ now");
			}
		},
		compile : function(ele,att){
			console.log(angular.element(ele).attr('class'));
			return function(scope,e,t,ng){
				console.log(e,scope.first,scope.second);
				e.on("keyup", function(){
					console.log(ng.$viewValue,ng.$modelValue);
					if(ng.$viewValue.indexOf("@") > -1){
						scope.funDivController();
					}else	if(ng.$viewValue.indexOf("#") > -1){
						scope.meth();
					}else{}
					scope.third(); // Isolated scope & it works
					console.log(ng);
				})
				console.log(t.type)
				//PArsers Demo
				ng.$parsers.push(function(val){
					return val.toUpperCase();
				})
				//Formatters DEmo
				ng.$formatters.push(function(va){
					console.log(va + " Changed by external function and caught by FORMATTERS");
					return va;
				})
				//ng.$options.debounce =1000;
				//console.log(ng);
			}
		}
	}
})