4

フォームのクリックして編集する機能を構築する方法に関するこの記事に出くわしました。著者は次のように述べています。

input type="date" または select が必要な場合はどうでしょうか? ここで、fieldType などのディレクティブのスコープに追加の属性名を追加し、その値に基づいてテンプレート内のいくつかの要素を変更できます。または、完全にカスタマイズするには、replace: true をオフにして、必要なクリック編集マークアップをページ内の既存のコンテンツにラップするコンパイル関数を追加することもできます。

コードを見ていると、ドロップダウンリストに適用する方法は言うまでもなく、任意の角度コンポーネントに適用できるようにテンプレートを操作する方法に頭を悩ませているようには見えません。以下の記事のコード:

    app.directive("clickToEdit", function() {
    var editorTemplate = '<div class="click-to-edit">' +
        '<div ng-hide="view.editorEnabled">' +
            '{{value}} ' +
            '<a ng-click="enableEditor()">Edit</a>' +
        '</div>' +
        '<div ng-show="view.editorEnabled">' +
            '<input ng-model="view.editableValue">' +
            '<a href="#" ng-click="save()">Save</a>' +
            ' or ' +
            '<a ng-click="disableEditor()">cancel</a>.' +
        '</div>' +
    '</div>';

    return {
        restrict: "A",
        replace: true,
        template: editorTemplate,
        scope: {
            value: "=clickToEdit",
        },
        controller: function($scope) {
            $scope.view = {
                editableValue: $scope.value,
                editorEnabled: false
            };

            $scope.enableEditor = function() {
                $scope.view.editorEnabled = true;
                $scope.view.editableValue = $scope.value;
            };

            $scope.disableEditor = function() {
                $scope.view.editorEnabled = false;
            };

            $scope.save = function() {
                $scope.value = $scope.view.editableValue;
                $scope.disableEditor();
            };
        }
    };
});

私の質問は、ドロップダウン編集を可能にするために上記のコードをどのように拡張できますか? それは、選択された値に変更できることです。

4

1 に答える 1

7

検討できるアプローチの 1 つは、 を使用することtemplate: function(tElement,tAttrs )です。

これにより、属性に基づいて適切なテンプレートを返すことができます。

app.directive("clickToEdit", function() {
      return {
       /* pseudo example*/
        template: function(tElement,tAttrs ){
             switch( tAttrs.type){
                 case 'text':
                    return '<input type="text"/>';
                 break;
             }
        },....

これは$compile ドキュメントで概説されています

于 2013-10-28T17:55:40.963 に答える