AngularJS Zwei-Wege-Datenbindung in Verschachtelten Richtlinien

Bitte lassen Sie mich wissen, wenn Sie weitere Informationen benötigen oder möchten, dass ich etwas verdeutlichen. Ich habe versucht eine Menge verschiedener Dinge, um dies herauszufinden, aber habe noch keine Lösung gefunden.

Ich bin relativ neu in angularJS und ich bin versucht, eine Anwendung zu erstellen, mit mehreren Schichten von Daten. Ich habe einige grundlegende Informationen für den Benutzer gespeichert, die in den Geltungsbereich des Körpers auf controller PageController. Dann habe ich eine Einstellungen-Formular geladen, in mit $routeParams (mit controller SettingsController), die enthält eine Reihe von benutzerdefinierten Richtlinien für das templating Zwecke. Da die Richtlinien sind verschachtelte, ich bin mit transklusion zu laden, der zweite innerhalb der ersten. Dies alles scheint zu funktionieren gut.

Mein problem ist, dass ich versuche auf das Feld user.firstname innerhalb der innersten Richtlinie und möchten zwei-Wege-Datenbindung zu ermöglichen, änderungen an der textbox zu bewirken, dass der Wert an der PageController Umfang zu ändern, wie gut. Ich weiß, dass eine Menge von diesen Arten von Problemen verursacht werden durch die Verwendung von primitiven im ng-model, aber ich habe versucht, indem Sie alles in ein extra Objekt so, dass ich trigger prototypal inheritance ohne Erfolg. Was mache ich hier falsch?

Hier ein JSFiddle meinem code, ausgezogen, so viel wie möglich, um das problem einzugrenzen. In diesem Beispiel, wenn ich in dem außerhalb der textbox, die direkt auf der PageController Rahmen, es wird sich ändern, die innere Textfeld, bis das Textfeld geändert wird, auf denen die Verbindung unterbrochen wird. Dies scheint nur wie das problem der Verwendung von primitiven, wie beschrieben, in anderen Fragen, 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>

Winkel-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>'
}
});

Winkel-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"
            }
        }
    }
});

InformationsquelleAutor princjef | 2013-06-19

  1. 10

    Tut mir Leid für den vorherigen code. Versuchen Sie dies: http://jsfiddle.net/CxNc2/2/

    Statt der übergabe den tatsächlichen Wert, ich bin nun übergeben das Objekt + einen Zeiger auf den richtigen Wert drin. Ich fügte hinzu, 'refobject' hier:

    <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" refobj='user' value="firstname"></div>
            </section>
        </div>
    </div>
</body>

    und ich fügte refobj + Wert hier:

    app.directive('formrow', function() {
    return {
        scope: {
            label: "@label",
            type: "@type",
            value: "@value",
            refobj: "="
        },
        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="refobj[value]" data-ng-switch-when="textInput" />' + 
            '</div>' + 
        '</div>'
    }
    Vielen Dank für solch eine schnelle Antwort! Ich versuchte es mit der Geige, aber es scheint das gleiche zu tun, wie die, die ich gepostet. Was ist das Ziel, es zu verändern, um eine Funktion zu isolieren, Umfang?
    Ich fügte hinzu, refobj, so brauchen Sie nicht zu nennen, 'Vorname', die innerhalb der Richtlinie, wie ich bin sicher, Sie wollen, dass dies generisch sein.
    Das ist wirklich clever! Hatte nicht gedacht, über die Verwendung der array Schreibweise statt des Punktes. Das funktioniert für meine Bedürfnisse. Danke!
    Ich würde dies 10 upvotes, wenn ich könnte. Dies rettete mein Speck. Danke!!!

    InformationsquelleAutor Nir

  2. 8

    Da die textbox in der Richtlinie verwendet eine primitive, anstatt ein Objekt für seine Modell (ng-model="value" eher als ng-model="someobj.somevalue"), deren Modell erstellt, nur auf den lokalen Bereich und die Eltern nicht zugänglich sind.

    Dem Update ist die Definition der Richtlinie textbox-Modell mit der dot-Regel als eine Objekt-Eigenschaft:

    ng-model="value.firstname"

    Dann pass das ganze user Objekt in der Richtlinie statt nur die primitive Eigenschaft:

    <div formrow ... value="user"></div>

    Hier ist eine demo

    Oh, ich sehen, wo ich schief ging. Vielen Dank für die Einsicht
    Hey, ich habe vereinfacht Ihre demo nur um zu sehen die Dinge klarer. Es scheint, arbeitet mit komplexen Objekten, aber nicht mit einfachen Eigenschaften... Hier ist die aktualisierte version. Können Sie sehen, warum?
    Ihr Beispiel der einfache Eigenschaft führt OP ' s Fehler. Um es kurz zu fassen, Eckige Rahmen der Vererbung erfordert, dass Objekte statt einfachen primitiven Variablen. Dies ist eine direkte Folge der prototypal inheritance in JavaScript. Sie konnte einen Blick auf [diese Antwort] gab ich anderswo um zu sehen, ein weiteres Beispiel, oder schauen Sie sich [dieses Q&A] für eine ausführlichere Erklärung.
    Also anscheinend war ich zu optimistisch denken Zeichenfolgen gebunden werden können. Aber Sie haben Recht, in dieser Weise verbindlich in verschachtelten Richtlinien funktioniert einwandfrei. Vorher war ich immer nur in einer Richtung (anfangs -) Bindung und war fuchsteufelswild über das erhalten es funktioniert. +10

    InformationsquelleAutor sh0ber

  3. 0

    Das problem wird verursacht durch ng-switch Vom doc Verständnis Bereich von git.

    ng-switch Umfang Vererbung funktioniert genau wie die ng-include. Also, wenn Sie brauchen
    2-Wege-Datenbindung zu einer primitiven im übergeordneten scope, $parent, oder
    das Modell geändert werden, um ein Objekt und binden Sie dann auf eine Eigenschaft, die
    Objekt. Dadurch wird vermieden, Kind, Rahmen ausblenden/shadowing von übergeordneten Bereich
    Eigenschaften.

    also, wenn Sie geben Sie text in das Textfeld ein.
    unter code wird ausgeführt werden, für die ng-switch Umfang.

    $scope.value="the text you typed"

    Damit es nicht zu konsultieren, die Prototyp-Kette zu suchen value .dies erstellt eine neue Eigenschaft für ng-switch Umfang.

    Wie bezeugen ?

    Wenn Sie ändern value zu $parent.value. alles funktioniert Prima. denn in der ng-switch für die primitiven Typ (angularjs würde erkennen, die value als primitiven Typ, wenn es ist kein Punkt )$parent beziehen sich auf formrow Richtlinie Anwendungsbereich.

    Versuchen Sie, entfernen das ng-switch oder machen Sie es wie der doc sagt. das problem wird verschwinden.

    Mehr wichtig, das Dokument empfehlen Sie uns immer einen Punkt . zu verweisen, die das Modell gelten, wenn eine bi-direktionale Bindung.

    Wenn ich etwas Falsches gesagt . Bitte korrigieren Sie mich, und machen es richtig .danke.

    InformationsquelleAutor Joe.wang

Schreibe einen Kommentar