3

私はangularjsを研究していて、通常のhtml要素を「編集可能」にすることができるカスタムの「編集可能」ディレクティブを作成したいと思います。

ユーザーがクリックすると、テキスト入力またはテキストエリアが表示され、ユーザーがコンテンツを編集できるようになります。また、[更新]ボタンと[キャンセル]ボタンもあります。ユーザーは「更新」ボタンをクリックするか、「Ctrl + Enter」を押して変更されたコンテンツを送信するか、「キャンセル」をクリックするか「エスケープ」を押して変更をキャンセルできます。

「編集可能な」署名は次のようになります。

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

ここでライブデモを作成しました：http：//jsfiddle.net/Freewind/KRduz/、更新するだけです。

4

5 に答える 5

14

私はAngularを初めて使用します。フィドルを使用して、実用的な例を入手していただければ幸いです。一方、John Lindquistは、エディターを埋め込むためのマークダウンタグを作成する方法を説明する優れたビデオを公開しています。これには、角度ディレクティブを使用して編集可能でプレビュー領域を作成する方法の詳細があります。

于 2012-06-24T12:05:50.297 に答える
7

まず、bsrが投稿したJohnLindquistangularjsのビデオを見てみました。とても良いです。次に、以下で一緒に投げたディレクティブを確認します。

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

これはまさにIMOで行われるべき方法です。編集可能なものを含めるために必要なことは次のとおりです。

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

行ってもいい。

于 2013-09-04T17:46:08.533 に答える
7

angle-xeditableをご覧ください：http： //vitalets.github.io/angular-xeditable

于 2013-09-19T08:53:48.010 に答える
4

私はうまくいく例を作ることから始めました。必要なすべてのオプションを備えたディレクティブに変換するのは、それほど手間がかからないはずです。

私の考えは、1つのディレクティブでやりすぎないようにすることです。おそらく、かなりの数の小さなディレクティブで実現できます。

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

于 2012-06-24T12:17:01.657 に答える
0

e-addYourDirectiveNameを使用する 

 <span editable-text="university.ValueAr" e-only-arabic-letters-input e-name="ValueAr" e-form="UniversityForm">  </span>

Letters-input e-name = "ValueAr" e-form = "UniversityForm" onbeforesave = "checkValue（$ data）"> {{university.ValueAr}}

于 2020-02-16T10:44:02.267 に答える