ng-click non fornisce avviso. Quando si fa clic sul modello interno della direttiva, la casella di avviso non viene visualizzata.ng-clic nel modello interno della direttiva non fornisce la funzionalità
Il legame violino è qui: http://jsfiddle.net/NNDhX/
tuo direttiva ha il suo isolato ambito. Quindi la funzione 'hi' dovrebbe essere all'interno dell'ambito della direttiva. Se si desidera passare la funzione del controller, è necessario eseguire il binding, ad esempio scope: { ..., hi: '&' } e quindi <you-directive hi='hi' ..>. Ecco un link alla documentazione su questo: Understanding Transclusion and Scopes.
Quindi, solo aggiungendo in funzione di collegamento è sufficiente:
link: function(scope, element, attrs) {
scope.hi = function() { alert("hi"); }
qui rappresentati violino: http://jsfiddle.net/GwBAh/
Grazie per la soluzione Valentyn Shybanov Ma voglio chiamare la funzione hi() nel controller ...Si prega di aggiornare questo violino – user1966260
Ho menzionato il modo in cui chiamare hi dal controller: aggiornare la proprietà scope della direttiva e collegarla alla funzione del controller. Fiddle con questa soluzione: http://jsfiddle.net/GwBAh/1/ Non dimenticare: l'ambito della direttiva è isolato, quindi puoi o passare qualcosa a questo ambito usando l'associazione o l'uso della transclusione - gli ambiti transclusi sono fratelli e non sono isolato. –
@ValentynShybanov Dovresti mettere il violino nella risposta per risparmiare tempo ai futuri lettori. :) E Angular dovrebbe rendere più semplice la scrittura di cose non intuitive come 'scope: {func: '&'}'! – Langdon
L'intera idea di ambiti isolato è esattamente per evitare 'condividere' le cose tra genitore < -> ambiti secondari, in qualche modo proteggendoli dall'essere esposti e (involontariamente) modificati da altre direttive/controller.
Se davvero si vuole evitare che il campo di applicazione isolare e condividere la portata del genitore, provate questo:
Inizia rimuovendo la definizione della direttiva di applicazione (commentata sotto):
transclude: true,
/*scope: { title:'@zippyTitle' },*/
Poi posizionare il attributi (attrs) dal elemento di direttiva sulla portata delle direttive:
scope.attrs = attrs;
Nota: in questo modo la proprietà attrs sarà disponibile anche sull'ambito padre (Ctrl3).
E infine definire il titolo in base al scope.attrs
template: '<div>' +
'<div class="title">{{attrs.zippyTitle}}</div>' +
'<div class="body" ng-transclude></div>' +
'<a ng-click="hi();">hi</a>' +
'</div>',
jsFiddle: http://jsfiddle.net/NNDhX/1/
Bella alternativa, ma la proprietà attr di scope dell'overwriting sembra un hack. Posso immaginare che potrebbe metterti nei guai (specialmente se stai arrivando dietro qualcuno che lo ha fatto). Sembra che potrebbe essere meglio essere più espliciti. – Langdon
Non so se questo è il modo migliore ma è possibile utilizzare $ genitore direttiva per l'accesso ambito genitore.
<a ng-click="$parent.hi();">parent</a>
Ecco link per esempio completo violino: http://jsfiddle.net/EKDse/
funzione di controllo all'interno di una direttiva deve essere chiamato all'interno del blocco transclusa. Utilizzando il metodo del controller all'interno del modello della direttiva, la direttiva dipende dal controller ed è una progettazione indesiderata dalle sue dipendenze (controller direttivo-esterno).
Nel campione traslate il pezzo di codice <a> nel blocco escluso. Ha reso la tua direttiva più isolata e risolto il problema:
<div class="zippy" zippy-title="Details: {{title}}...">
{{text}}
<a ng-click="hi();">hi</a>
</div>
Non ho nemmeno guardato alle domande in cui non si sono preoccupati di modificare il contenuto in linea nella domanda. – jpsimons