Aliasing modelu w ngtemplate

Question

Chciałbym podać alias modelu używanego w szablonie, aby ten sam szablon mógł być ponownie użyty dla różnych modeli. Na przykład w następującym modelu:

member = { 

    name: "Member1", 
    children:[ 
    { 
     name:"Child1" 
    }, 
    { 
     name:"Child2" 
    } 
    ] 
} 

zarówno "członek", jak i "dzieci" mają własność "nazwa". Dlatego chcę stworzyć pojedynczy szablon manipulujący tą właściwością "nazwa". udało mi się to osiągnąć za pomocą tego pytania:

Bind ngInclude to different models

Jak sugeruje, stworzyłem dyrektywy, takich jak:

app.directive('member', function(){ 
return { 
    restrict: 'A', 
    template: "{{prefix}}<input type='text' ng-model='member.name'>", 
    scope: { 
     member: "=" 
    } 
}; 
}); 

Po to jest korzystanie z niniejszej dyrektywy:

<div ng-controller="MemberCtrl"> 
    {{member | json}} 
    <div member="member"></div> 
    <div member="member.children[0]"></div> 
</div> 

Byłem w stanie osiągnąć ponowne wykorzystanie szablonu, jednak ponieważ używam "zakresu" w mojej dyrektywie, to stworzyło isola zakres, który nie jest w stanie uzyskać dostępu do żadnej właściwości zakresu kontrolera. Tak więc dla kontrolera:

app.controller('MemberCtrl', function($scope){ 
$scope.member = { 

    name: "Member1", 
    children:[ 
    { 
     name:"Child1" 
    }, 
    { 
     name:"Child2" 
    } 
    ] 
}; 

    $scope.prefix = "Mr."; 
}); 

Szablon wewnątrz dyrektywy nie może uzyskać dostępu do właściwości "prefix". Poniżej znajduje się jsfiddle:

http://jsfiddle.net/vaibhavgupta007/mVBaC/1/

Co może być problemem w tym?

Edit

mogę również użyć $ rodzica dostęp do prefiksu. Ale czy to jest czyste podejście.

Answer 1

Po prostu zdefiniuj "prefiks" jako izolowaną zmienną zasięgu w obiekcie definicji dyrektywy i odwołaj go w atrybutach elementów.

app.directive('member', function(){ 
return { 
    restrict: 'A', 
    template: "{{prefix}}<input type='text' ng-model='member.name'>", 
    scope: { 
     member: "=", 
     prefix: "=" 
    } 
}; 
}); 

 

<div ng-controller="MemberCtrl"> 
    {{member | json}} 
    <div member="member" prefix="prefix"></div> 
    <div member="member.children[0]" prefix="prefix"></div> 
</div> 

Fiddle

Answer 2

Aby móc powiązać właściwości dyrektywa zakres różnych właściwościach kontrolera (np member i member.children[0]) do stosowania w sposób ogólny szablon, wierzę ci będzie musiał użyć składni zakresu izolatów (jak już odkryłeś).

Gdy idziesz w dół „wyizolować zakres drogę”, musisz określić wszystkie właściwości i funkcje kontrolera, że ​​dyrektywa wymaga dostępu jako dodatkowe atrybuty:

<div member="member" prefix="{{prefix}}" join-fn="joinNameWithPrefix(someName)"></div> 

Następnie w dyrektywie:

template: "{{prefix}}<input type='text' ng-model='member.name'>" 
    + "<br>fn result={{ joinFn({someName: member.name}) }}", 
scope: { 
    member: "=", 
    prefix: '@', 
    joinFn: '&' 
}, 

Fiddle

Zastosowanie = dla wiązania z danymi, @ dwukierunkowych na jednokierunkowe strun, a & dla wyrażeń jednokierunkowych.