Écrire une coutume “modifiable” directive avec angularjs

Je suis étudiant en angularjs, et je veux écrire une coutume "modifiable" directive, qui peut jouer un élément html "modifiable":

Lorsque l'utilisateur clique dessus, une saisie de texte ou textarea pour permettre à l'utilisateur de modifier le contenu, et il y a aussi une "mise à jour" et le bouton "annuler" en outre. L'utilisateur peut cliquer sur le bouton "actualiser" ou appuyez sur "Ctrl+entrée" pour envoyer le contenu modifié, ou cliquez sur "annuler" ou appuyez sur "echap" pour annuler la modification.

La "modifiable" signature ressemble:

<div editable 
     e-trigger="click|dblclick"       /* use click or dblclick to trigger the action */
     e-update-url="http://xxx/xxx"    /* when submitting, the data will PUT to this url */
     e-singleline="true|false"        /* if ture, use text input, otherwise textarea */
     ng-model="name">                 /* the corresponding model name */
{{name}}
</div>

J'ai créer une démo en live ici: http://jsfiddle.net/Freewind/KRduz/, vous pouvez juste le mettre à jour.

OriginalL'auteur Freewind | 2012-06-24

  1. 14

    Je suis nouveau sur Angulaire moi-même, et espérons que vous obtenez le un exemple de travail avec votre violon. Pendant ce temps, John Lindquist a une excellente vidéo où il explique comment créer un abattement étiquette à intégrer un éditeur. Qui a des détails sur la façon de rendre éditable et aperçu des régions angulaire directives.

    C'est très très bonnes vidéos!
    Alors que les vidéos sont superbes, j'aimerais voir un résumé ici.

    OriginalL'auteur bsr

  2. 7

    J'ai d'abord regarder les Jean Lindquist angularjs vidéos bsr posté - ils sont très bons. Alors, j'aimerais vérifier la directive j'ai jeté ci-dessous.

    .directive('editable', function() {
    var editTemplate = '<input type="text" ng-model="inputValue" \
        ng-show="inEditMode" ng-dblclick="switchToViewMode()" \
        class="form-control input-sm">';
    var viewTemplate = '<div ng-hide="inEditMode" \
        ng-dblclick="switchToEditMode()">{{ value }}</div>';
    return {
        restrict: 'E',
        scope: {
            value: '=ngModel',
            bindAttr: '='
        },
        controller: function($scope) {
            $scope.inputValue = $scope.value;
        },
        replace: true,
        compile: function(tElement, tAttrs, transclude) {
            tElement.html(editTemplate);
            tElement.append(viewTemplate);

            return function(scope, element, attrs) {
                scope.inEditMode = false;

                scope.switchToViewMode = function() {
                    scope.inEditMode = false;
                    scope.value = scope.inputValue;
                }
                scope.switchToEditMode = function() {
                    scope.inEditMode = true;
                }
                scope.toggleMode = function() {
                    scope.inEditMode = !scope.inEditMode;
                }

                element.bind("keydown keypress", function(event) {
                    if (event.keyCode === 13) {
                        scope.$apply(function() {
                            scope.switchToViewMode();
                        });
                    }
                });
            }
        }
    }
})

    C'est exactement comment il devrait être fait de l'OMI. Voici tout ce que vous devez faire pour inclure un modifiable:

    <editable ng-model="name"></editable>

    Bon pour aller.

    OriginalL'auteur Ryan

  3. 6

    Jetez un oeil sur angulaires-xeditable:
    http://vitalets.github.io/angular-xeditable

    OriginalL'auteur vitalets

  4. 4

    J'ai commencé par faire un exemple qui fonctionne. Je suppose qu'il ne devrait pas être trop de travail pour le transformer en une directive avec toutes les options que vous souhaitez.

    Ma pensée est - n'essayez pas d'en faire trop dans une directive, peut-être, il peut être réalisé avec quelques petits directives.

    http://jsfiddle.net/Saulzar/rueHv/

    C'est utile, merci!

    OriginalL'auteur Oliver