Isolate scope - Value defined inside directive scope alone must perform change

Question

I am experimenting with Isolate Scope of Custom Directive.

A challenging question I checked with many developer and so far did i not get an answer.

Please find the code from JS Fiddle from Link and help me to correct what changes I should make to get this thing work.

There is a button inside Directive template named My Reverse "On button click, I want to change text value which is there inside the directive template without affecting the parent value**"

Looking forward for correction in the Fiddle code provided.Requesting correction to this code sample in JS FIDDLE

MORE SPECIFIC CLARIFICATION:

When i click on the parent button i want to affect the directive textbox value but when i click on the directive's button i want to affect only the directive textbox value not the parents textbox value.

---

    app.directive("myDirective", function() {

  return {
    restrict: "EA",
    scope: {
      name: "@",
      color: "=",
      reverse: "&"
    },
    template: [
      "<div class='line'>",
      "Name : <strong>{{name}}</strong>;  Change name:<input type='text' ng-model='name' /><br/>",
      "<br/>When I click 'My Reverse' Button, name given inside 'Directive scope' alone must perform reverse operation & not Name inside Parent scope : <input type='button' ng-click='myReverse()' value='My Reverse'/>",
      "</div><div class='line'>",
      "Color : <strong style='color:{{color}}'>{{color|uppercase}}</strong>;  Change color:<input type='text' ng-model='color' /><br/></div>",
      "<br/><input type='button' ng-click='reverse()' value='Reverse Name'/>"
    ].join("")
  };

Waiting for a solution.. please any one help me.. will be really thankful

Answer 1

I have another solution.

Live example on jsfiddle.

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

app.controller("MainCtrl", function($scope) {
  $scope.name = "Harry";
  $scope.color = "#333333";
  $scope.getReverseName = function(name) {
    console.log('getReverseName', name);
    return name ? name.split("").reverse().join("") : name;
  };
  $scope.reverseName = function() {
    $scope.name = $scope.getReverseName($scope.name);
  };
  $scope.randomColor = function() {
    $scope.color = '#' + Math.floor(Math.random() * 16777215).toString(16);
  };
});

app.directive("myDirective", function() {

  return {
    restrict: "EA",
    scope: {
      name: "@",
      color: "@",
      reverse: "&"
    },
    template: [
      "<div class='line'>",
      "Name : <strong>{{name}}</strong>;  Change name:<input type='text' ng-model='name' /><br/>",
      "<br/>When I click 'My Reverse' Button, name given inside 'Directive scope' alone must perform reverse operation & not Name inside Parent scope : <input type='button' ng-click='myReverse()' value='My Reverse'/>",
      "</div><div class='line'>",
      "Color : <strong style='color:{{color}}'>{{color|uppercase}}</strong>;  Change color:<input type='text' ng-model='color' /><br/></div>",
      "<br/><input type='button' ng-click='reverse()' value='Reverse Name'/>"
    ].join(""),
    link: function(scope) {
      scope.myReverse = function() {
        console.log(scope.name);
        scope.name = scope.reverse({
          name: scope.name
        });
      }
    }
  };
});

.parent {
  border: 20px solid #676767;
  padding: 20px;
}
.parent,
.directive {
  position: relative;
}
.parent:after,
.directive:after {
  display: inline;
  color: #fff;
  font-size: normal;
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 100;
  padding: 1px 5px;
  background-color: rgba(0, 0, 0, 0.5);
}
.parent:after {
  content: "MainCtrl or Parent Scope";
}
.directive {
  padding: 20px;
  border: 20px solid #cbccdd;
  margin-top: 20px;
}
.directive:after {
  content: "Directive Scope"
}
.line {
  border-bottom: 1px dotted #ccc;
  padding: 5px 0;
}

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

  <div class="parent" ng-controller="MainCtrl">
    <div class="line">
      Name inside parent scope is: <strong>{{name}}</strong>
      <input type="button" ng-click="reverseName()" value="Reverse name" />
    </div>
    <div class="line">
      Color inside parent scope is: <strong style="color:{{color}}">{{color|uppercase}}</strong>
      <input type="button" ng-click="randomColor()" value="Randomize color" />
    </div>
    <div class="directive" my-directive name="{{name}}" color="{{color}}" reverse="getReverseName(name)"></div>
  </div>
</div>

Answer 2

I chanded your code so that you can pass value from parent controller to directive by pressing the 'Reverse Name' button and make the 'Name reverse' by pressing the 'My Reverse' button, without affecting the parent controller.

I added the Link function paremeter and inside it, i created the myReverseD() function which is called when you click on 'My Reverse' button.

so into your directive you have:

app.directive("myDirective", function() {

  return {
    restrict: "EA",
    scope: {
      name: "@",
      color: "@",
      reverse: "&"
    },
    template: [
      "<div class='line'>",
      "Name : <strong>{{name}}</strong>;  Change name:<input type='text' ng-model='name' id='nametxt'/><br/>",
      "<br/>On button click 'My Reverse', I want to reverse text value which is there inside  directive template of isolate scope without affecting the above defined parent Name in Parent scope : <input type='button' ng-click='myReverseD($event)' value='My Reverse'/>",
      "</div><div class='line'>",
      "Color : <strong style='color:{{color}}'>{{color|uppercase}}</strong>;  Change color:<input type='text' ng-model='color' /><br/></div>",
      "<br/><input type='button' ng-click='reverse()' value='Reverse Name'/>"
    ].join(""),
     link: function (scope, element, attrs) {
               console.log(scope.name,scope.color);

               scope.myReverseD = function($ev){

                    var nametxt = document.getElementById('nametxt');
                    console.log($ev);
                    console.log('reverse',nametxt,nametxt.value);

                   nametxt.value = nametxt.value.split("").reverse().join("");       
               }
            }
  };

JSFIDDLE: http://jsfiddle.net/own7kbru/7/

Hope helps, good luck.