Изолировать область - значение, определяемое только внутри области действия, необходимо выполнить изменение

Question

Я экспериментирую с областью выделения специальной директивы.

Сложный вопрос Я проверил со многими разработчиками, и до сих пор я не получил ответа.

Пожалуйста, найдите код от JS Fiddle от Link и помогите мне исправить, какие изменения я должен внести, чтобы эта работа работала.

Существует кнопка в шаблоне директивы имени Моя Reverse «На нажатие кнопки, я хочу изменить текстовое значение, которое есть внутри шаблона директивы без влияния на родительское значение **»

Глядя вперед для исправления в коде Fiddle. Requesting correction to this code sample in JS FIDDLE

БОЛЕЕ КОНКРЕТНЫЕ ПОЯСНЕНИЯ:

Когда я нажмите на кнопку родительского я хочу влияет на значение текстового поля директивы, но когда я нажимаю на кнопку директивы я хочу влиять только директивы текстовое поле значение не родители текстовое поле значение.

---

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("") 
    }; 

В ожидании решения .. пожалуйста, любой один помочь мне .. будет очень благодарен

Answer 1

У меня есть другое решение.

Показательный пример на 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

Я chanded код, так что вы можете передать значение из родительского контроллера директивы, нажав кнопку «Обратное имя» и введите «Обратное имя», нажав кнопку «Мой обратный», , не затрагивая родительский контроллер.

Я добавил парабометр функции связи и внутри него, я создал функцию myReverseD(), которая вызывается, когда вы нажимаете кнопку «Мой обратный».

так в вашей директиве у вас есть:

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/

Надежда помогает, удачи.