2013-04-22 10 views
26

Sto tentando di costruire una nuova direttiva in cima a una direttiva già esistente ma sono bloccata nei miei processi. Quando il caricamento della pagina che sto affrontando il seguente errore:Direttive multiple [direttiva n. 1, direttiva n. 2] che richiede l'ambito isolato su

Multiple directives [directive#1, directive#2] asking for isolated scope on <easymodal title="Test-Title" text="Text-Text" oncancel="show = false" onok="alert();">

La direttiva di base è simile al seguente:

Rohan.directive('easymodal', function() { 
    return { 
     restrict: 'E', 
//  priority: 200, 
     transclude: true, 
     replace: true, 
     scope:{ 
      showModal: "=show", 
      callback: "=closeFunction", 
      dismissable: '&' 
     }, 
     template: 
      '<div data-ng-show="showModal" class="modal-container">' + 
       '<div class="modal-body">' + 
        '<div class="title"><span data-translate></span><a data-ng-show="dismissable" data-ng-click="dismiss()">x</a></div>' + 
        '<div data-ng-transclude></div>' + 
       '</div>' + 
       '<div class="modal-backdrop" data-ng-click="dismiss()"></div>' + 
      '</div>' 
    }; 
}); 

E la mia direttiva involucro simile a questa:

Rohan.directive('easydialog', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: {title: '@', 
      text: '@', 
      onOk: '&', 
      onCancel: '&'}, 
     replace: true, 
     template: 
      '<easymodal>' + 
       '{{text}} ' + 
       '<hr>' + 
       '<button ng-click="{{onCancel}}" value="Cancel"' + 
       '<button ng-click="{{onOk}}" value="Ok"' + 
      '</easymodal>' 
    }; 
}); 

mio html assomiglia a questo:

<easydialog title="Test-Title" text="Text-Text" onCancel="show = false" onOk="alert();" /> 

All'inizio pensavo che il mio attributo title fosse in conflitto quindi ho rimosso quell'attributo nella linea html e dalla mia direttiva wrapper ma non era efficace.

+0

potresti per favore impostare violino –

risposta

31

È necessario modificare il modello easydialog e avvolgere <easymodal> in un <div>.

+5

Grazie, non l'avrei mai indovinato. – Rohan

+2

Potresti approfondire? Qual è il problema in primo luogo e in che modo il wrapping in un div lo corregge? – masimplo

+5

@ mxa055 Credo che Angular associ gli elementi HTML a un ambito e non possa associare un singolo elemento HTML a più di un ambito. – Langdon

0

Il tuo problema è semplicemente che stai aggiungendo un argomento template all'interno dello directive e aggiungi un tag di risoluzione del modello denominato <easydialog> nel tuo modello HTML effettivo. Puoi scegliere l'uno o l'altro.

Problemi correlati