2013-02-02 27 views
21

Nasıl böyle bir şey için kapsam değerini ayarlarım:Yönergenin kapsamındaki ng tekrarlama öğesine nasıl erişirsiniz?

<div ng-controller="MyCtrl"> 
     <my-element ng-repeat="p in people" person='p'></my-element> 
</div> 
var myApp = angular.module('myApp',[]); 

myApp.directive('myElement', function(){ 
    return { 
     restrict: 'E', 
     template: '<div>{{ name }}</div> <div>{{ age }}</div>' 
    } 
}); 

function MyCtrl($scope) { 
    $scope.people = [{ name: 'Mike', age: 20 },{name: 'Peter', age: 22 }]; 
} 

cevap

25

her yineleme yana ardından

template: '<div>{{ p.name }}</div> <div>{{ p.age }}</div>' 

şablon iş var demek, "kapsam değerini" tarafından ise ng-repeat, yeni bir çocuk kapsamı oluşturur, bu kapsamda p tanımlanmıştır. senin yönergesi bir izolatı kapsamını oluşturmak olmadığından, sen person öznitelik gerekmez, bu nedenle bu yukarıdaki çalışır: Bir izolatı kapsamını istiyorsanız

<my-element ng-repeat="p in people"></my-element> 

, kullanmak

<my-element ng-repeat="p in people" person='p'></my-element> 

ve

return { 
    restrict: 'E', 
    scope: { 
     person: '=' 
    }, 
    template: '<div>{{ person.name }}</div> <div>{{ person.age }}</div>' 
} 
+1

bu form 'ng-repeat =" p in people "kişi = 'p' hala geçerli. Dokümanlarda bahsettiğimi görmüyorum ve bana hata veriyor. teşekkürler – bsr

+1

@bsr, geçerli olması gerekir: [çalışma keman] (http://jsfiddle.net/mrajcok/xgxQJ/) –

+0

Teşekkürler fiddle için işaretle – bsr

1

Yönergenin kapsamını tanımlarken '@' kullanmayı seviyorum. Eğer yönergede izole bir kapsam oluşturmak gerekmez

return { 
    scope: '@', 
    link: function(scope) { 
     console.log(scope.p); //It can now be accessed because of '@' 
    } 
} 
+0

örneğinizde '@' olmadan da erişilebilir – asologor

3

: Bu bağlantıdaki örneğin, s erişmek için kapsamı izole yönergesini sağlar. ng tekrarı bunu sizin için otomatik olarak yapar. yüzden sadece kaldırın: yönergede

: En yönergede

person='p' 

Eğer

$scope.p.personAttribute 
gibi bir şey erişmek mümkün olacak:
scope: { 
    person: '=' 
}, 

ve ng tekrar HTML işaretlemesinde

, burada açıklandığı gibi: angularjs-pass-instance-of-each-ng-repeat-in-html-to-directive

İlgili konular