2012-09-27 16 views
6

Come evitare direttive con transclude per creare nuovi ambiti?Direttiva angularJS transclude scope = false?

Questo jsfiddle Non riesco a legare nulla a causa dei nuovi ambiti illustrati con bordi rossi.

Html:

<div ng-app="components"> 
    <input ng-model="var"> 
    <block> 
     123 
     <input ng-model="var"> 
    </block> 
</div> 

JavaScript:

angular.module('components', []).directive('block',function(){ 
    return{ 
     scope:false, 
     replace:true, 
     restrict:"E", 
     transclude:true, 
     template:'<div class="block" ng-transclude></div>', 
     link:function(scope, el, attrs, ctrl){ 

     } 
    } 
}); 

CSS:

.ng-scope{ 
    border:1px solid red; 
    margin:10px; 
} 

risposta

6

In realtà è previsto Behav IOR come dichiarato qui (ng-transclude creare un ambito di bambino): https://github.com/angular/angular.js/issues/1056 e discussi qui: https://groups.google.com/forum/#!msg/angular/45jNmQucSCE/hL8x48-JfZIJ

È possibile risolvere questo impostando un membro su un oggetto nel campo di applicazione (obj.var) come in questo violino: http://jsfiddle.net/rdarder/pnSNj/10/

+0

Grazie. Ho fatto un esempio più semplice [jsfiddle] (http://jsfiddle.net/RHLzK/5/). Ma è un bug o è una funzionalità? – Jossi

+0

È normale comportamento per gli ambiti figlio (vengono ereditati dal prototipo dall'ambito padre, il che significa che è possibile leggere dall'ambito padre, ma non appena si scrive, è sull'ambito figlio, a meno che non si usi l'obiettivo sull'ambito genitore workaroud), potresti forse dare un'occhiata al codice sorgente della direttiva ng-transclude, copiarlo e crearne uno con un ambito: opzione falsa. – Guillaume86

+0

I problemi si presentano di nuovo se comincio a usare transclude set come 'elemento'. Qualcuno ha qualche idea del perché non funziona ora. Demo: http://plnkr.co/edit/Bv1kFQtzdVzsasHTUrgf?p=preview –

0

Anche se questo non è raccomandato dalla squadra angolare, un'altra soluzione consiste nel chiamare in modo esplicito la portata $ genitore all'interno della porzione transclusa:

<div ng-app="components"> 
    <input ng-model="var"> 
    <block> 
     123 
     <input ng-model="$parent.var"> 
    </block> 
</div> 
Problemi correlati