Angular'de ng-repeat dan ayrı bir kapsam nasıl oluşturulur?

Question

AngularJS’de yeniyim ve Angular’de kapsam kavramını anlamakta sorun yaşıyorum. Ben bir yığın kapsamı oluşturmak için özel bir yönerge oluşturmak için bana tavsiyelerde bulunan online makalelerin yanı sıra, stackoverflow'da da bazı yazılar okudum, ama hiçbir yere ulaşamıyorum ...

Üzerinde çalıştığım projeye gelince, tıklandığında, bir textarea tetikleyecek bir düğme yapmaya çalışıyorum. Bununla birlikte, ng-repeat nedeniyle, tek bir tuşa tıklarken tüm düğmeler için textarea tetiklenir.

Benim .js dosyası:

<ul> 
    <li ng-repeat="object in objectList"> 
     <button type="text" myDirective ng-click="toggle()">Click</button> 
     <textarea myDirective ng-show="visible"></textarea> 
    </li> 
</ul> 

Answer 1

Açısal, yinelenen yinelenen bir çocuk oluşturmuyorsa (bunu izole etmeyin), bunu deneyin, bir değişken döndürdüğünüzde, yalnızca bu yineleme dizisinde görünür.

<div ng-repeat="i in [0,1,2,3,4,5,6,7,8,9]" ng-init="visible=false"> 
    <button ng-click="visible=!visible">Toggle</button> 
    <h1 ng-show="visible">look at me!</h1> 
</div> 

Plunker

Answer 2

bir yönerge kullanmaya gerek yoktur:

angular.module('myApp') 
    .controller('myCtrl', function ($scope, Question) { 
    scope.visible = false; 

    scope.toggle = function() { 
     scope.visible = !scope.visible; 
    }; 

    .directive("myDirective", function() { 
    return { 
     scope: { 
     ngClick: '&', 
     ngShow: '&' 
     } 
    } 
    }); 

İşte benim HTML dosyasıdır. Döngündeki her öğeye başvurmak için foreach'da object kullanmanız gerekir.

objectList her nesne için görünür ekleyin:

$scope.objectList = [ 
     { visible: false }, 
     { visible: false }, 
     { visible: false } 
    ]; 

sonra kapatma düğmesi geçiş yapmak için bir nesne geçmesi gerekir:

$scope.toggle = function (object) { 
    object.visible = !object.visible; 
}; 

ng göstermek object.visible ve ng-click kontrol etmek gerekir nesneyi geçmek gerekir:

<button type="text" ng-click="toggle(object)">Click</button> 
<textarea ng-show="object.visible"></textarea> 

Plunkr