Per favore fatemi sapere se avete bisogno di ulteriori informazioni o volete che chiarisca qualsiasi cosa. Ho provato molte cose diverse per capirlo ma non ho trovato una soluzione.AngularJS Associazione dati bidirezionale in direttive annidate
Sono relativamente nuovo su angularJS e sto cercando di creare un'app con diversi livelli di dati. Ho alcune informazioni utente di base memorizzate nell'ambito del corpo sul controller PageController. Poi ho un modulo di impostazioni che carica usando $ routeParams (con controller SettingsController) che include un paio di direttive personalizzate per scopi di template. Poiché le direttive sono nidificate, sto usando la transclusione per caricare la seconda all'interno della prima. Tutto sembra funzionare bene.
Il mio problema è che sto provando a fare riferimento al campo user.firstname dall'interno della direttiva più interna e voglio utilizzare l'associazione dati bidirezionale per consentire le modifiche apportate alla casella di testo per far sì che anche il valore dell'ambito di PageController cambi. So che molti tipi di problemi sono causati dall'uso delle primitive in ng-model, ma ho provato a inserire tutto all'interno di un oggetto extra in modo da attivare l'ereditarietà del prototipo inutilmente. Cosa sto facendo di sbagliato qui?
Ecco un codice JSFiddle del mio codice, ridotto il più possibile per isolare il problema. In questo esempio, se scrivo la casella di testo esterna, che è direttamente sull'ambito di PageController, modificherà la casella di testo interna fino a quando quella casella di testo non verrà modificata, su cui viene interrotta la connessione. Questo sembra proprio il problema dell'uso delle primitive come descritto in altre domande, ma non riesco a capire dove si trovi il problema.
HTML:
<body class="event-listing" ng-app="app" ng-controller="PageController">
<div class="listing-event-wrap">
<input type="text" ng-model="user.firstname" />
<div ng-controller="SettingsController">
<section block title="{{data.updateInfo.title}}" description="{{data.updateInfo.description}}">
<div formrow label="{{data.updateInfo.labels.firstname}}" type="textInput" value="user.firstname"></div>
</section>
</div>
</div>
</body>
direttive angolari:
app.directive('formrow', function() {
return {
scope: {
label: "@label",
type: "@type",
value: "=value"
},
replace: true,
template: '<div class="form-row">' +
'<div class="form-label" data-ng-show="label">{{label}}</div>' +
'<div class="form-entry" ng-switch on="type">' +
'<input type="text" ng-model="value" data-ng-switch-when="textInput" />' +
'</div>' +
'</div>'
}
});
app.directive('block', function() {
return {
scope: {
title: "@title",
description: "@description"
},
transclude: true,
replace: true,
template: '<div class="page-block">' +
'<h2 data-ng-show="title">{{title}}</h2>' +
'<p class="form-description" data-ng-show="description">{{description}}</p>' +
'<div class="block-inside" data-ng-transclude></div>' +
'</div>'
}
});
Controller angolari:
app.controller("PageController", function($scope) {
$scope.user = {
firstname: "John"
};
});
app.controller("SettingsController", function($scope) {
$scope.data = {
updateInfo: {
title: "Update Your Information",
description: "A description here",
labels: {
firstname: "First Name"
}
}
}
});
Grazie per una risposta così rapida! Ho provato il violino ma sembra fare la stessa cosa di quello che ho postato. Qual è l'obiettivo di cambiarlo in una funzione isolare l'ambito? – princjef
Ho aggiunto refobj quindi non è necessario chiamare 'firstname' all'interno della direttiva in quanto sono sicuro che vuoi essere generico. – Nir
È davvero intelligente! Non avevo pensato di usare la notazione dell'array invece del punto. Questo funzionerà per i miei bisogni. Grazie! – princjef