Associazione dati angolare a due vie non funzionante: javascript, angularjs, angularjs-direttiva, angularjs-scope

Grazie a tutti ragazzi. Ora selezionerò una risposta dettagliata e la chiuderò.

vedi il codice qui sotto, è abbastanza semplice

<tr ng-repeat="record in records track by record.id">
<td><input type="checkbox"/></td>
<td ng-repeat="(name, value) in record" ng-hide="name == "id"">
<portia-td value="{{value}}"></portia-td>
</td>
</tr>

Ecco la direttiva definire

return {
restrict: "E",
replace: true,
transclude: true,
scope: {
value: "="
},

controller: function($scope) {
$scope.input = {show: false, value: $scope.value};
},
templateUrl: "td.html"
}

Perché questo produce errore? ma quando si modifica l'ambito impostato su "@", funziona di nuovo.

risposte:

1 per risposta № 1

Se si desidera un'associazione dati bidirezionale, è necessario utilizzare =. Come questo:

scope: {
value: "="
}

E sull'HTML:

<portia-td value="value"></portia-td>

Quando usi "{{value}}", stai sostanzialmente interpolando il valore di value proprietà e passandola alla direttiva. Ciò significa che angolare non sarà in grado di ottenere il riferimento per creare l'associazione bidirezionale, tutto ciò che otterrà sarà un valore (stringa / numero / ecc ...).

Ulteriori informazioni Qui.

---

1 per risposta № 2

se è necessario modificare il modello all'esterno diambito della direttiva, è necessario utilizzare l'opzione del modello getter-setter. Controlla il seguente link, c'è un esempio per aggiornare un valore direttamente nel controller, al di fuori dell'ambito.

https://docs.angularjs.org/api/ng/directive/ngModelOptions

---

0 per risposta № 3

Non usare {{value}} quando si passa il valore alla direttiva, in questo modo si passa un riferimento ed è bidirezionale.

Esempio di plnkr completo qui: http://plnkr.co/edit/rvY9A0DOEZpOEwOoy3xN?p=preview

<portia-td value="value"></portia-td>

---