Bitte lassen Sie mich wissen, wenn Sie weitere Informationen benötigen oder möchte ich etwas zu klären. Ich habe viele verschiedene Dinge ausprobiert, um das herauszufinden, habe aber keine Lösung gefunden.AngularJS Zwei-Wege-Datenbindung in geschachtelten Direktiven
Ich bin relativ neu zu angularJS und ich versuche, eine App mit mehreren Schichten von Daten zu erstellen. Ich habe einige grundlegende Benutzerinformationen im Bereich des Körpers auf Controller PageController gespeichert. Ich habe dann ein Einstellungsformular, das mit $ routeParams (mit Controller SettingsController) lädt, die ein paar benutzerdefinierte Anweisungen für Templating-Zwecke enthält. Da die Direktiven verschachtelt sind, verwende ich die Einfügung, um die zweite in die erste zu laden. Das scheint alles in Ordnung zu sein.
Mein Problem ist, dass ich versuche, das Feld user.firstname von innerhalb der innersten Direktive verweisen und zweiseitige Datenbindung verwenden möchten, um Änderungen an der Textbox zu ermöglichen, den Wert im PageController-Bereich zu ändern. Ich weiß, dass viele dieser Probleme durch die Verwendung von Primitiven im ng-Modell verursacht werden, aber ich habe versucht, alles in ein zusätzliches Objekt zu setzen, sodass ich die prototypische Vererbung ohne Erfolg auslösen kann. Was mache ich hier falsch?
Hier ist ein JSFiddle meines Codes, so weit wie möglich reduziert, um das Problem zu isolieren. Wenn ich in diesem Beispiel das äußere Textfeld einschließe, das sich direkt im PageController-Bereich befindet, wird das innere Textfeld geändert, bis dieses Textfeld geändert wird und die Verbindung unterbrochen wird. Dies scheint genau wie das Problem der Verwendung von Primitiven, wie in anderen Fragen beschrieben, zu sein, aber ich kann nicht herausfinden, wo das Problem hier ist.
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>
Angular-Richtlinien:
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>'
}
});
Angular Controller:
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"
}
}
}
});
Vielen Dank für eine schnelle Antwort! Ich probierte die Geige aus, aber es scheint das Gleiche zu tun wie die, die ich gepostet habe. Was ist das Ziel, es in einen Funktionsisolat-Bereich zu ändern? – princjef
Ich habe refobj hinzugefügt, so dass du 'firstname' nicht innerhalb der Direktive aufrufen musst, da ich sicher bin, dass dies generisch sein soll. – Nir
Das ist wirklich schlau! Hatte nicht gedacht, die Array-Notation anstelle des Punktes zu verwenden. Dies wird für meine Bedürfnisse funktionieren. Vielen Dank! – princjef