Schrijf een aangepaste "bewerkbare" instructie met angularjs

Ik bestudeer angularjs en ik wil een aangepaste "bewerkbare" richtlijn schrijven, die een normaal html-element "bewerkbaar" kan maken:

Wanneer de gebruiker op deze knop klikt, wordt er een tekstinvoer of een tekstgebied weergegeven om de gebruiker de inhoud te laten bewerken. Daarnaast is er een knop voor bijwerken en een knop Annuleren. De gebruiker kan op de knop "update" klikken of op "Ctrl + enter" drukken om de gewijzigde inhoud te verzenden of op "annuleren" klikken of op "escape" drukken om de wijziging te annuleren.

De "bewerkbare" handtekening ziet er als volgt uit:

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

Ik heb hier een live demo gemaakt: http://jsfiddle.net/Freewind/KRduz/ , je kunt het gewoon updaten.

3

4 antwoord

Ik ben zelf nieuw bij Angular en ik hoop dat je een goed voorbeeld krijgt met je viool. Ondertussen heeft John Lindquist een uitstekende video waarin hij uitlegt hoe een markdown-tag kan worden gemaakt om een ​​editor in te bedden. Deze bevat details over hoe u bewerkbare en voorbeeldgebieden met hoekige richtlijnen kunt maken.

14
toegevoegd
Dat zijn hele goede video's!
toegevoegd de auteur Freewind, de bron
Hoewel de video's geweldig zijn, zou ik hier graag een samenvatting willen zien.
toegevoegd de auteur zhon, de bron

Eerst zou ik de John Lindquist angularjs video's bekijken die bsr gepost heeft - ze zijn erg goed. Dan zou ik de richtlijn die ik samen gooide hieronder bekijken.

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

Dit is precies hoe het IMO zou moeten zijn. Hier is alles wat u hoeft te doen om een ​​bewerkbaar bestand op te nemen:


Klaar om te vertrekken.

7
toegevoegd

Please have a look on angular-xeditable: http://vitalets.github.io/angular-xeditable

6
toegevoegd

Ik begon met het maken van een voorbeeld dat werkt. Ik denk dat het niet te veel werk zou moeten zijn om er een richtlijn van te maken met alle opties die je wilt.

Mijn gedachte is - probeer niet te veel in één richtlijn te doen, misschien kan dit met nogal wat kleinere richtlijnen worden bereikt.

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

4
toegevoegd
Dat is handig, dank je!
toegevoegd de auteur Freewind, de bron