Va bene usare $$ prevSibling per accedere ai dati di scope in una direttiva 'transcluded'?

Question

La mia configurazione è la seguente direttiva:

<div data-directive-a data-value="#33ff33" data-checked="true"> 
    <div data-directive-b></div> 
</div> 

• sto usando inclusione per garantire directiveB ottiene resi.
• directiveA ha una casella di controllo che ha lo scopo di modificare qualche valore ogni volta che viene controllato.
• questo valore deve essere accessibile nello scope directiveA e directiveB.

Sono riuscito a farlo, ma solo facendo riferimento a $$prevSibling - c'è un modo migliore?

Ecco il codice: http://jsfiddle.net/janeklb/yugQf/ (in questo esempio, facendo clic sulla casella di controllo è semplicemente lo scopo di "clear" del valore)

-

Un po 'più di profondità: I 'contenuti' di directiveA (ciò che viene incluso in esso) non è sempre directiveB. Altre direttive come directiveB finiranno anche lì. I "tipi" directiveB verranno sempre utilizzati entro directiveA.

Answer 1

Per evitare di unire troppo i componenti, eviterei di utilizzare $$prevSibling. La migliore soluzione dal momento che i componenti di tipo directiveB devono essere utilizzati all'interno dei componenti directiveA utilizzando require.

.directive('directiveB', function() { 
    return { 
    require: '^directiveA', 
    scope: true, 
    link: function (scope, element, attrs, directiveA) { 
     scope.obj = directiveA.getObj(); 
    } 
    }; 
}) 

Il ^require indica che da qualche parte sull'elemento della presente direttiva o su qualsiasi elemento sopra di esso nella gerarchia DOM è una direttiva chiamata directiveA, e vogliamo chiamare metodi su suo controllore.

.directive('directiveA', function() { 
    return { 
    // ... 
    controller: function ($scope) { 
     // ... 
     this.getObj = function() { 
     return $scope.obj; 
     }; 
    } 
    }; 
}) 

Così ora in directiveB è possibile utilizzare ng-model="obj.attr".

Ci sono molte varianti su questo, ma considerando la domanda generale, ritengo che questo sia l'approccio migliore. Ecco un Fiddle aggiornato: http://jsfiddle.net/yugQf/7/.

Answer 2

@Josh menzionato nella sua risposta che

La soluzione migliore in quanto i tuoi directiveB -come componenti dovrebbero essere utilizzati entro directiveA componenti è quello di utilizzare require.

ho accarezzato con questo e credo che un controllore sulla directiveA è l'unica soluzione (così +1 Josh). Ecco cosa gli scopi simile utilizzando violino del PO: (. Reverse la freccia marrone e si dispone di $$ previousSibling invece di $$ nextSibling)

Oltre $$previousSibling, portata 004 non ha alcun percorso di isolare scope 003.Notare che l'ambito 004 è l'ambito transcluso creato da directiveA e dal momento che directiveB non crea un nuovo ambito, questo ambito viene anche utilizzato da directiveB.

Poiché l'oggetto che si desidera condividere con directiveB viene creato nel controller directiveA, non è possibile utilizzare gli attributi per condividere i dati tra le direttive.

---

Creare un modello all'interno di una direttiva e quindi condividerlo con il mondo esterno è piuttosto atipico. Normalmente, ti consigliamo di definire i tuoi modelli al di fuori delle tue direttive e anche al di fuori dei tuoi controller (listen for a few minutes to Misko). I servizi sono spesso un buon posto per memorizzare i tuoi modelli/dati. I controllori dovrebbero normalmente fare riferimento alle parti del/i modello/i che devono essere proiettate nella vista a cui sono associate.

Per semplicità, ho intenzione di definire il modello su un controller, quindi le direttive accederanno entrambi a questo modello nel modo normale. Per scopi pedagogici, directiveA utilizzerà comunque un ambito isolato e directiveB creerà un nuovo ambito figlio utilizzando scope: new come nella risposta di @ Josh. Ma qualsiasi tipo (isolare, nuovo figlio, nessun nuovo ambito) e la combinazione funzioneranno, ora che abbiamo il modello definito in un ambito genitore.

Ctrl:

$scope.model = {value: '#33ff33', checkedState = true}; 

HTML:

<div ng-controller="NoTouchPrevSibling"> 
    <div data-directive-a data-value="model.value" data-checked="model.checkedState"> 
     <div data-directive-b></div> 
    </div> 

Per altri motivi pedagogici, ho optato per passare directiveA le due proprietà modello come attributi separati, ma la anche l'intero modello/oggetto poteva essere passato. Poiché direttivaB creerà un ambito secondario, non è necessario passare alcun attributo poiché ha accesso a tutte le proprietà dell'ambito padre/controllore.

direttive:

app.directive('directiveA', function() { 
    return { 
     template: '<div>' 
      + 'inside parent directive: {{checkedState}}' 
      + '<input type="checkbox" ng-model="checkedState" />' 
      + '<div ng-transclude></div>' 
      + '</div>', 
     transclude: true, 
     replace: true, 
     scope: { 
       value: '=', 
       checkedState: '=checked' 
      }, 
    }; 
}); 
app.directive('directiveB', function() { 
    return { 
     template: '<div>' 
      + '<span>inside transcluded directive: {{model.checkedState}}</span>' 
      + '<input type="text" ng-model="model.value" />' 
      + '</div>', 
     replace: true, 
     scope: true 
    }; 
}); 

Mirini:

Si noti che la portata del bambino directiveB (006) eredita da portata transclusa di directiveA (005).

Dopo aver fatto clic sulla casella di controllo e modificando il valore nella casella di testo:

Si noti che le maniglie angolari aggiornamento delle proprietà dell'ambito isolare. Normale JavaScript prototypal inheritance fornisce l'accesso child scope della direttiva B allo model nell'ambito del controller (003).

Fiddle