AngularJS - formes Modulaires avec les directives

J'ai d'abord posé cette question ici, mais je crois que j'ai devant moi et il est plus compliqué qu'il ne l'est vraiment, donc je suis re-poser des questions ici avec un peu plus clair.

Comment voulez-vous créer ré-utilisable forme de widgets avec les directives et les ré-utilisable paramètres? Comme ceci:

<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>

Directive modèles ne semblent pas permettre d'interpolation sur ng-model.

En outre, pouvez-vous modulariser et de paramétrer le formulaire de comportement de sorte que vous pouvez avoir la norme actions POST, par exemple?

J'ai une réponse à la question ci-dessous en fonction de mes expériences, mais je vais la garder hors de l'accepter pour un temps, depuis que je suis très nouveau à Angulaires et souhaite connaître l'avis des autres.

Quelques notes supplémentaires à partir de cette question ont été utiles pour comprendre cela: stackoverflow.com/a/14116498/439500

OriginalL'auteur hgcrpd | 2013-07-08

  1. 15

    Angulaire sort de la boîte avec un améliorer la balise qui est documentée ici. Fondamentalement, il crée un champ sous la forme d'un contrôleur dans le formulaire et toutes les balises à l'intérieur. Si vous faites cela:

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

    Cela crée un champ d'application pour la forme, car la forme de la balise contient le ng-controller tag. Dans le champ d'application, testForm est l'objet javascript pour la forme, et testForm.firstInput est l'objet javascript pour la première entrée. Il semble que ces objets ont également la validation de certains fonctionnalités disponibles, voir les docs ici.

    Les données sur le formulaire sera disponible comme un objet de données dans le FormCtrl portée, avec des touches de "première" et "deuxième", et vous pouvez définir des méthodes dans le contrôleur de travailler.

    Vous pouvez aussi mettre plusieurs formes à l'aide de la même FormCtrl, et il semble que Angulaires permettra de créer de nouvelles instances pour chaque forme, de sorte que vous n'avez pas à vous soucier de formes polluantes des uns et des autres données.

    À l'aide de directives

    Permet maintenant supposons que nous disposons d'une sorte de complexe d'entrée ou de widget qui est mis en œuvre dans une directive. Cet exemple utilise deux listes de sélection pour afficher toutes les villes dans un état. Vous devez d'abord sélectionner un état, alors il va de requête pour les villes de l'etat et de remplir la seconde boîte de sélection.

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

    Alors vous pouvez simplement coller dans la balise form, et ça marchera. Parce que la directive ne définit pas une portée, il vous suffit de joindre à la portée de la 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 les directives

    EDIT:
    Donc, apparemment, cela fonctionne:

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

    Il vous suffit de le faire sans les curlies, et il va se lier. Ma conjecture est que le parent est obligatoire pour someParameter de l'enfant, et la sélection est alors la liaison à somParameter de l'enfant.

    Donc, tout cela ci-dessous manuellement la compilation de la fonction de lien n'est pas nécessaire.

    =====

    Mais le problème c'est que mon citySelect directive a une codés en dur ng-modèle de liaison, donc si j'ai créé une sorte de générique widget, je ne pouvais pas utiliser plus d'un dans un formulaire. Malheureusement, cela ne semble pas fonctionner:

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

    Le seul moyen que j'ai obtenu ce travail est de construire l'élément DOM manuellement dans une fonction de liaison, mais je ne suis pas sûr si cela est conseillé. J'aimerais avoir les commentaires de tous ceux à propos de cette oeuvre:

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

    Mélange dans les paramètres sur la forme

    Depuis des instances distinctes de FormCtrl sont créés pour chaque formulaire, vous pouvez réutiliser beaucoup de fonctionnalités dans FormCtrl. Mais vous pouvez également utiliser des directives additionnelles sur une balise de formulaire pour ajouter des paramètres ou de briser la fonctionnalité. Par exemple:

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

    La forme du champ d'application sera alors de combiner la portée de FormCtrl et postForm, de sorte que tout est accessible. Dans mon expérimentation, il semble que le FormCtrl l'emporte, donc si quelque chose comme $champ d'application.submit() est définie dans les deux FormCtrl et postForm, FormCtrl de préséance (je pense), c'est peut-être une race condition de chargement asynchrone, je ne sais pas.

    Au lieu d'utiliser ng-controller, je pense que vous pouvez également utiliser scope:true sur le mixin directive (postForm), ou peut-être avec plus de sécurité, scope: {}.

    OriginalL'auteur hgcrpd