Birden çok açısal yönerge örneği için farklı kapsam

Question

Verileri ana denetleyicinin kapsamından alan aşağıdaki Eğik Yönergeye sahibim. Benim Sorunum, aynı yönerge aynı sayfaya birden çok kez eklendiğinde, kapsamları aynı olur. Herhangi bir direktifteki değerlerden biri değiştirildiğinde, tüm direktiflerde aynı değer de değişir.

Benim Yönergesi

angular.module('myapp').directive('memberAddress', function() { 
    return { 
     restrict: 'E', 
     templateUrl: '/Directives/memberAddress.html' 
    } 
}); 

memberAddress.html:

<div class="col-md-4"> 
    <h3>{{addressModel.title}}</h3> 
    </div> 

Veli Tasarım:

<div id="addressDiv"> 
    <div class="row"></div> 
</div> 

Veli kontrolörü:

angular.module('myapp').controller('MemberController', MemberController); 
MemberController.$inject = ['$scope', '$compile']; 

function MemberController($scope, $compile) { 
    $scope.addressModel = { title: ''} 
    $scope.addAddress = function() { 
      // "$scope.addressModel" Now it has some title text from UI. 
      var row = angular.element(document.getElementById('addressDiv')).find('.row'); 
      var el = $compile("<member-address></member-address>")($scope); 
      row.append(el); 
    } 
} 

addAddress() çağrısında, sayfaya ilk kez "memberAddress" yönergesi ekler. Ancak, UI'den başka bir addressModel.title eklediğimde, yeni bir yönerge ekler, ancak daha önce eklenen "memberAddress" yönergesindeki başlığı değiştirir ve başlık metnini tüm yönergeler için aynı yapar.

Diğer yönergelerin değişmesini engellemenin bir yolu var mı?

Answer 1

Her direktif için yeni kapsam bildirerek çözdüm. İşte

Veli Kontrolörü değişiklikler şunlardır: cevapları için

angular.module('myapp').controller('MemberController', MemberController); 
MemberController.$inject = ['$scope', '$compile']; 

function MemberController($scope, $compile) { 
    $scope.addressModel = { title: ''} 
    $scope.addAddress = function() { 

     // "$scope.addressModel" Now it has some title text from UI. 

     // UPDATE - Here I created a new scope. 
     var addressDirectiveScope = $scope.$new(true); 
     addressDirectiveScope.addressModel = $scope.addressModel; 

     var row = angular.element(document.getElementById('addressDiv')).find('.row'); 

     //var el = $compile("<member-address></member-address>")($scope);   
     // UPDATE - Now I passed the new scope "addressDirectiveScope" instead of "$scope" to $compile. 
     var el = $compile("<member-address></member-address>")(addressDirectiveScope); 
     row.append(el); 
    } 
} 

herkese teşekkürler!

Answer 2

Kapsamınızı, denetleyicinizde değil, yönergelerinizde ayarlayın. Açısal js sitesinin bir örneği vardır.

.directive('myCustomer', function() { 
    return { 
     restrict: 'E', 
     scope: { customerInfo: '=info' }, 
     templateUrl: 'my-customer-iso.html' 
    }; 
}); 

o zaman muhtemelen de senin direktifi içine denetleyicisi yeniden yazmak zorunda kalacak, kodunuzu çalışmasını sağlamak için.

angular.module('myapp').directive('memberAddress', function() { 
    return { 
     scope: { 
      addressModel: "@" 
     }, 
     restrict: 'E', 
     templateUrl: '/Directives/memberAddress.html' 
    } 
}); 

memberAddress.html:

<div class="col-md-4"> 
    <h3>{{addressModel().title}}</h3> 
    </div> 

Kod okul bir izolatı kapsamını kullanmak

Answer 3

Try 'açısal ile şekillenen' kendi yönergesi bölümde gerçekten iyi bu kapakları Üst Tasarım:

<div id="addressDiv"> 
    <div class="row"> 
     <member-address address-model="addressModel"></member-address> 
    </div> 
</div>