AngularJS - Modulformen mit Richtlinien

Eigentlich hatte ich diese Frage gestellt hier, aber ich glaube, ich habe vor mich und machte es komplizierter, als es wirklich ist, also bin ich wieder gefragt, es hier mit einem etwas klareren Wortlaut.

Wie erstellen Sie wiederverwendbare form von widgets mit Richtlinien und re-nutzbare Parameter? Wie diese:

<form>
<special-input label-text="A Special Input" bind-to="data.special"></special-input>
<special-input label-text="Specialer" bind-to="data.moreSpecial"></special-input>
</form>

Richtlinie Vorlagen scheinen nicht zu erlauben interpolation auf ng-Modell.

Darüber hinaus können Sie die Modularisierung und Parametrisierung der form Verhalten, so dass Sie können standard-POST-Aktionen, zum Beispiel?

Habe ich die Antwort auf die Frage unten, basierend auf meine Experimente, aber ich werde halten sich die Annahme, es für eine Weile, da ich sehr neu zu Kantig und würde gerne von anderen hören.

InformationsquelleAutor hgcrpd | 2013-07-08
  1. 15

    Winkel kommt aus der box mit einer Verbesserung-tag, hier dokumentiert. Grundsätzlich wird ein Rahmen in form eines Controllers um die form und alle tags, die innerhalb es. So Sie dies tun:

    <body ng-app="TestApp">
<form ng-controller="FormCtrl" name="testForm">
    <input name="firstInput" ng-model="data.first">
    <input name="secondInput" ng-model="data.second">
    <button ng-click="submit()">Submit</button>
</form>
</body>

    JS:

    var app = angular.app('TestApp', []);
app.controller('FormCtrl', function($scope) {
    $scope.submit = function() {
        //Form submit logic here
        console.log("Submitting the form");
        console.log($scope);
    }
})

    Dies schafft einen Rahmen für die form, da der form-tag enthält die ng-controller-tag ein. Im Umfang, in testForm ist das javascript-Objekt für die form und testForm.firstInput ist das javascript-Objekt für den ersten input. Es sieht aus wie diese Objekte haben auch einige Validierungs-Funktionalität zur Verfügung, siehe docs hier.

    Die Daten auf dem Formular wird als Objekt-Daten in die FormCtrl Bereich, mit den Tasten "ersten" und "zweiten", und Sie können Methoden definieren, die im controller, die an diesem Thema arbeiten.

    Können Sie auch mehrere Formulare mit dem selben FormCtrl, und wie es scheint, Eckig wird, neue Instanzen zu erstellen, die für jede form, so dass Sie nicht haben, um sorgen über die Formen verschmutzen den Daten des jeweils anderen.

    Using-Direktiven

    Nun nehmen wir an, wir haben eine Art von komplexen Eingabe-oder widget, dass die Umsetzung in einer Richtlinie. In diesem Beispiel werden zwei Felder auswählen, die zur Anzeige aller Städte in einem Staat. Sie müssen wählen Sie zunächst ein Bundesland, dann ist es die Abfrage der Städte in diesem Staat, und füllen Sie die zweite select-box.

    app.directive('citySelect', function() {
    return {
        replace: true,
        template: '<div><select ng-change="getCities()" ng-options="s.name for s in states"></select>' +
                  '<select ng-model="data.selectedCity" ng-options="c.name for c in cities"></select>',
        controller: function($scope) {
            //Omitting the logic for getCities(), but it'd go here
        }
    };
})

    Dann können Sie nur kleben Sie es in das form-tag, und es wird funktionieren. Da die Richtlinie nicht einen Bereich definieren, es wird einfach nur legen, um den Umfang der FormCtrl.

    <body ng-app="TestApp">
<form ng-controller="FormCtrl" name="testForm">
    <input name="firstInput" ng-model="data.first">
    <input name="secondInput" ng-model="data.second">
    <div city-select></div>
    <button ng-click="submit()">Submit</button>
</form>
</body>

    Paramaterizing die Richtlinien

    EDIT:
    Also anscheinend funktioniert:

    scope: {someParameter: "="},
template: '<div><select ng-model="someParameter"></select></div>'

    Man macht es einfach ohne curlies und werde es binden. Meine Vermutung ist, dass die übergeordneten Bereich ist die Bindung an someParameter im untergeordneten Bereich, und wählen Sie dann die Bindung an somParameter im untergeordneten Bereich.

    Damit all diese unterhalb von rund manuell kompilieren in die link-Funktion ist nicht notwendig.

    =====

    Aber das problem ist, dass meine citySelect-Richtlinie hat eine hart codierte ng-Modell verbindlich, also wenn ich eine Art generic-widget, konnte ich nicht mehr als ein von es in eine form. Leider scheint dies nicht zu funktionieren:

    scope: {someParameter: "="},
template: '<div><select ng-model="{{ someParameter }}"></select></div>'

    Die einzige Möglichkeit, die ich bekommen haben, diese Arbeit zu bauen, das DOM-element manuell in eine verbindende Funktion, aber ich bin mir nicht sicher, ob dies ratsam ist. Ich würde mich freuen, Kommentare von Personen zu dieser Umsetzung:

    <body ng-app="TestApp">
<form ng-controller="FormCtrl" name="testForm">
    <input name="firstInput" ng-model="data.first">
    <input name="secondInput" ng-model="data.second">
    <div city-select bind-to="data.homeCity"></div>
    <div city-select bind-to="data.workCity"></div>
    <button ng-click="submit()">Submit</button>
</form>
</body>

app.directive('citySelect', function($compile) {
    return {
        replace: true,
        template: '<div></div>',
        controller: function($scope) {
            //Omitting the logic for getCities(), but it'd go here
        }
        link: function(scope, iElem, iAttrs) {
            var html = '<div><select ng-bind="' + iAttrs['bindTo'] + '"></div>';
            iElem.replaceWith($compile(html)(scope));
        }
    };
})

    - Mixing-Parameter auf die form

    Da separate Instanzen von FormCtrl sind für jedes Formular erstellt haben, können Sie die Wiederverwendung der Großteil der Funktionalität in FormCtrl. Aber Sie können auch zusätzliche Richtlinien, die auf einem form-tag, um Parameter hinzuzufügen oder auseinander brechen Funktionalität. Zum Beispiel:

    <form ng-controller="FormCtrl" name="testForm" post-form post-path="/path/to/resource/">

app.directive('postForm', function() {
    return {
        controller: function($scope) {
            $scope.post = function() {
                //Some generic POST behavior
            };
        },
        link: function(scope, iElem, iAttr) {
            scope.postPath = iAttr['postPath'];
        },
    };
});

    Form der Rahmen wird dann verbinden die Rahmen von FormCtrl und postForm, so dass alles zugänglich ist. In meinem Experiment, wie es scheint, die FormCtrl Vorrang, so dass, wenn etwas wie $scope.submit() ist definiert in beiden FormCtrl und postForm, FormCtrl den Vorrang (glaube ich), vielleicht ist dies eine race-condition aus asynchrone laden, weiß ich nicht.

    Anstelle der Verwendung von ng-controller, ich denke, Sie können auch scope:true auf der mixin-Richtlinie (postForm), oder vielleicht mehr sicher, scope: {}.

    InformationsquelleAutor hgcrpd
Schreibe einen Kommentar