İzolatı ayır - Yalnızca yönerge kapsamı içinde tanımlanan değer,

Question

numaralı değişikliği gerçekleştirmelidir. Özel Yönergenin İzolasyon Kapsamı'nı deniyorum.

Zorlu bir soru Birçok geliştirici ile kontrol ettim ve şu ana kadar bir cevap almadım.

Bağlantıdan JS Fiddle'ın kodunu bulun ve bu şeyin işe yaraması için neler yapmam gerektiğini düzeltmem için bana yardımcı olun. Ters listem adlı Yönergesi şablona içinde bir düğmesi vardır

bekliyorum

"butonu tıklandığında, ben üst değerini ** etkilemeden direktif şablonu içinde var olduğu metin değerini değiştirmek istiyorum" sağlanan Fiddle kodunda düzeltme için. Requesting correction to this code sample in JS FIDDLE

DAHA ÖZEL AÇIKLAMA: i ebeveyn butonuna tıklayarak zaman

i istediğiniz yönergesi metin kutusu değerini etkileyen ama yönerge butonuna tıkladığınızda ben sadece yönergeyi etkileyecek istiyoruz metin kutusu değeri ebeveynler metin kutusu değeri değil. Çözüm için bekliyorum

---

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

.. herhangi biri bana yardım lütfen .. basarak direktifine ebeveyn kontrol cihazından değerini geçirebilmesi için ben kodunuzu chanded

Answer 1

Başka bir çözümüm var.

Canlı örnek üzerinde 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

gerçekten müteşekkir olacaktır 'Ters İsim' düğmesine basın ve ana denetleyiciyi etkilemeden 'Tersine' düğmesine, 'a basarak 'Ad tersini' yapın.

Bağlantı işlevi paremeterini ekledim ve bunun içinde 'Geri' düğmesine tıkladığınızda çağrılan myReverseD() işlevini oluşturdum.

böylece direktifi içine var:

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/

Umut, iyi şanslar yardımcı olur.