JSFiddle - React, Tailwind, and code Playground

by Samar Pattanayak

HTML

<div ng-app="myApp">
   <div ng-controller="myController">
   {{nameMac}} Running in Mac
   <input type="text" ng-model="val"/>
   <div id="divid" style="height:100px;border:1px solid grey; width:180px" 
   my-directive attr1={{nameMac}} ng-model="val3" name={{count}}>
  {{val}}
  
   </div>
   <form name="form1">
     <input type="text" name="txt1"/>
     <span></span>
   </form>
   </div>
 </div>

JavaScript

var app= angular.module("myApp",[]);
app.controller("myController", function($scope){
	$scope.nameMac="Samar hwre"
  $scope.count=3;
})
app.directive("myDirective", function(){
	return {
  	restrict:"EA",
    scope:{
    	name :'@'
    },
    require:"ngModel",
    link: function(scope,elem,attr){
    	//alert("from dire link")
      scope.$watch("name", function(nv,ov){
      	alert(nv)
      })
      alert(attr.ngModel)
      attr.$observe("name", function(value){
      	alert(value);
      })
    },
    template:"<div id='dir1' ><input type='text' placeholder='type' ng-model='val3'/><input type='text' placeholder='type one' ng-model='count'/></div>"
  }
})
app.directive("textDirective", function(){
	return {
  	restrict:"EA",
    require:"ngModel",
    link : function(scope,ele,attr,ctrl){
    	ctrl.$parsers.push(function(value){
      	if(value>5){
        	ctrl.$setValidity("check",true);
        }else{
        	ctrl.$setValidity("check", false);
        }
      })
    }
  }
})