3

完全なフォームを構築するためにさまざまなディレクティブを呼び出す巨大なフォームを構築しています。Form Builder を呼び出すメイン ページは、次のように ng-model データを渡します。

<div form-builder form-data=“formData”&gt;</div>

次に、フォームビルダーページはさまざまな子ディレクティブを呼び出して、フォームのさまざまなセクションを構築します。

FormBuilder.html:

<div form-fields></div>
<div photo-fields></div>
<div video-fields></div>
 .. etc.. etc...

コントローラーで使用する場合、次のように子ディレクティブで$scope問題なくアクセスできました。$scope

function formBuilder() {
    return {
         restrict: 'A',
         replace: true,
         scope: {
            formData: '='
         },
         templateUrl: 'FormBuilder.html',
         controller: function($scope) {
            $scope.formSubmit = function() {
            // Submits the formData.formFields and formData.photoFields
            // to the server
            // The data for these objects are created through 
            // the child directives below
         }
     }
   }
}

function formFields() {
    return {
            restrict: 'A',
            replace: true,
            templateUrl: 'FormFields.html',
            controller: function($scope) {
               console.log($scope.formData.formFields);
            }
    }
}

function photoFields() {
    return {
            restrict: 'A',
            replace: true,
            templateUrl: 'PhotoFields.html',
            controller: function($scope) {
               console.log($scope.formData.photoFields);
            }
   }
}
... etc..

$scopeしかし、 を削除してを使い始めて以来ControllerAs、親子コントローラーを使用した双方向バインディングへのアクセスにさまざまな問題が発生しています。

function formBuilder() {
    return {
         restrict: 'A',
         replace: true,
         scope: {
           formData: '='
         },
         templateUrl: 'FormBuilder.html',
         controller: function() {
              var vm = this;
             console.log(vm.formData);  // Its fine here

             vm.formSubmit = function() {
               // I cannot change formData.formFields and formData.photoFields 
               // from Child Directive "Controllers"
            }
        },
        controllerAs: ‘fb’,
        bindToController: true
   }
}

function formFields() {
    return {
            restrict: 'A',
            replace: true,
            templateUrl: 'FormFields.html',
            controller: function() {
                var vm = this;
                console.log(vm.formData.formFields); 
                // No way to access 2 way binding with this Object!!!
            }
   }
}

function photoFields() {
    return {
        restrict: 'A',
        replace: true,
        templateUrl: 'PhotoFields.html',
        controller: function() {
            var vm = this;
            console.log(vm.formData.photoFields); 
            // No way to access 2 way binding with this Object!!!
        }
    }
}

何をしようとしても、障害物に到達しています。私が試したことは次のとおりです。

  1. 分離スコープ:子ディレクティブに分離スコープとしてformData.formFieldsand を渡そうとしましたが、ネストされた分離スコープが原因でエラーが発生するため、それは不可能です。formData.photoFields$compile: MultiDir
  2. フォーム セクションごとに個別のディレクティブを持たず、それらすべてをディレクティブの下の 1 つのディレクティブにformBuilder含めると、膨大なディレクティブになります。上記は単なるスケッチですが、各子ディレクティブは最終的にまとめられた 1 つの大きなフォームを構築します。したがって、それらを一緒にマージすることは、保守が困難になり、読み取り不能になるため、実際には最後の手段です。
  3. 私がこれまで見てきたこと ControllerAsから、子ディレクティブから親ディレクティブにアクセスする方法はないと思います。Controller
  4. のような子ディレクティブ テンプレートの ng-model で親の ControllerAs を使用すると、正常に<input type=“text” ng-model=“fb.formData.formFields.text" />動作しますが、実行できない処理のために Child ディレクティブのコントローラーから同じものにアクセスする必要があります。
  5. を削除し て再度controllerAs使用すると、以前と同じように機能しますが、将来の Angular の変更に備えるため$scopeに、 を完全に削除しようとしています。$scope

$scopeこれは高度なフォームであるため、さまざまなフォーム セクションを処理するための個別のディレクティブが必要です。また、Angular 1.2 以降、ネストされた分離スコープが許可されていないため、特に使用を取り除こうとすると、さらに困難になりControllerAsます。

ここで私のオプションは何ですか？私の長い文章を読んでいただきありがとうございます。

4

1 に答える 1