Directive scopes

examples of directive isolated scopes

by Samar Pattanayak

HTML

<div ng-app="myApp">
  <div ng-controller="myController">
    <form name="form1">
      From Controller {{name}}
      </br>
      Name :
      <input type="text" class="textCSS" id="txtName" ng-model="name" /> Age :
      <input type="text" name="age" class="textCSS" ng-model="ageC" error-directive/>
      </br>
      <span class="divCSS" style="color:red" ng-show="form1.age.$error.val">Dont try to change Age greater than 80</span>

      <my-directive age={{ageC}} name="name" message="message" time="time">
      </my-directive>

      <div class="divCSS" ng-bind-html="message">
        {{message}} <strong>{{time}}</strong>
      </div>
    </form>
  </div>
</div>

CSS

.textCSS {
  border-radius: 5px;
  margin: 5px 0px 0px 10px;
  border-color: #FF5733;
  padding-left: 5px;
}

.strongCSS {
  font-size: 22px;
  color: #338DFF;
}

.divCSS {
  padding: 10px 0px 0px 25px;
  font-size: 18px;
  color: #148F77;
}

JavaScript

var ang = angular.module("myApp", []);
ang.controller("myController", function($scope) {
  $scope.name = "Samar";
  $scope.ageC = 26;
  $scope.time = 20;
  $scope.message = `Name will change in both Directive and Controller, Wait for `;

});
ang.directive("myDirective", function($timeout, $interval) {
  return {
    restrict: "EA",
    scope: {
      name: "=",
      age: "@",
      message: "=",
      time: "="
    },


    link: function(scope, elem, att) {
      //changing two way binding name
      var intervalID = $interval(function() {
        scope.time = scope.time - 1;
      }, 1000)
      $timeout(function() {
        //att.age is found but i am not sure why att.name is pulling name as   		//a string. att.age and scope.age is pulling data correctly.     	
        scope.name = scope.name + " Pattanayak";
        scope.message = " 'Name'  changed, now age will change but it will not reflect in Controller, Wait for ";
      }, 10000)

      //changing one way binding age
      $timeout(function() {
        $interval.cancel(intervalID);
        scope.message = " Changes are done :-)";
        scope.time = "";
        //att.age is found but i am not sure why att.name is pulling name as   		//a string. att.age and scope.age is pulling data correctly.
        scope.age = parseInt(att.age) + 50;
      }, 20000)

    },
    template: '<div style="margin-left: 20px; margin-top:15px;color:#FF5833"><div >From Directive and age is <strong class="strongCSS"> {{age}} </strong>and his name is <strong class="strongCSS"> {{name}} </strong></div>Directive Name :<input type="text" class="textCSS" ng-model="name"/></br>Directive Age :<input type="text" class="textCSS" ng-model="age"/></div>'
  }
});
ang.directive("errorDirective", function() {
  return {
    restrict: "EA",
    require: "ngModel",
    link: function(scope, elem, attr, ctr) {
      var viewValue;
      ctr.$parsers.push(function(inpVal) {

        if (inpVal > 80) {

          ctr.$setViewValue(viewValue);
 ...