AngularJSイベントを渡さないコンポーネントの動的コンパイル

Question

ユーザーに提示されるフォームを表示するためにモーダルを使用しています。フォームは、私は、モーダルにモーダルに提示した後に戻るコンポーネントののOnSave/onCancelイベントによって返されるパラメータを渡す形式のタグを渡すのOnSaveとonCancel方法

bindings: { 
     entity: '<', 
     readOnly: '<', 
     onSave: '&', 
     onCancel: '&' 
    }, 

ですべてのコンポーネントでありますそれを呼び出し側に返すモーダルです。これを行うには、私は、コンポーネントのプロパティを設定し、それを生成するために、$のコンパイル方法でそれを実行ディレクティブを入れています：

function link(scope, elem, attrs) { 
     if (scope.formType != null && scope.formType != '') { 
      var objString = "<" + scope.formType + " "; //create beginning tag 
      objString += "entity='assignedEntity' read-only='readOnly' "; 
      objString += "on-save='onSave(entity)' on-cancel='onCancel(entity)'>"; 
      objString += "</" + scope.formType + ">"; //add end tag 

      var obj = $compile(objString)(scope); 

      elem.append(obj); 
     } 
    }; 

    return { 
     restrict: 'E', 
     scope: { 
      formType: '=', 
      onSave: '&', 
      onCancel: '&', 
      assignedEntity: '<', 
      readOnly: '<' 
     }, 
     link: link 
    } 

私は、ディレクティブを呼び出すと、一般的なモーダルから適切なプロパティを渡しますボックスのように：

これは、正常に指定されたフォームコンポーネントを生成し、各プロパティの正しい値をフォームコンポーネントに渡します。私の問題は、onSaveまたはonCancelイベントがコンポーネントによってスローされたときに、モーダルコントローラがイベントを受け取っていることです（vm.okまたはvm.cancelが呼び出されます）が、これらのイベントに渡されるパラメータは呼び出しに渡されません。 vm.okとvm.cancelに渡されるプロパティは常に定義されていません。

コンポーネントから、私はこのようなのOnSave/onCancelメソッドを呼び出しています：

ctrl.onSave({ 
      entity: ctrl.entity 
     }); 

と私はctrl.entityはそれで価値を持って実際にはないことを確認しました。

なぜ、パラメータがモーダルコントローラに到達するまでにコールツリーを戻したのかは不明です。

私は私が午前問題定義を支援するために、このplunkrを作成：あなただけリッスン機能の一部としての実体を添付するのを忘れて同じようにそれをデバッグするのビットはそうした後、コードを確認してくださいExample

Answer 1

をクリック$イベントのために。ここには作業plunkerがあります。

(function() { 

    var directiveID = "formGenerator"; 

    angular.module('app').directive(directiveID, ['$compile', FormGenerator]); 

    function FormGenerator($compile) { 

    function link(scope, elem, attrs) { 
     console.log(scope, elem, attrs); 
     if (scope.formType !== null && scope.formType !== '') { 
     var objString = "<" + scope.formType + " "; //create beginning tag 
     //PLEASE TAKE A LOOK HERE, WE'RE EXPECTING THE EVENT TO PROPOGATE TO THE PARENT CONTROLLER 
     //so we take into account the event on-save, the same would have to be done for on-cancel 
     objString += "on-save='onFormSave($event)' on-cancel='onFormCancel(entity)'>"; 
     objString += "</" + scope.formType + ">"; //add end tag 

     var obj = $compile(objString)(scope); 

     elem.append(obj); 
     } 
    } 

    return { 
     restrict: 'E', 
     scope: { 
     formType: '=', 
     onFormSave: '&', 
     onFormCancel: '&' 
     }, 
     link: link 
    } 
    } 
})(); 




(function() { 
    var componentID = "testForm"; 

    var app = angular.module("app"); 

    function TestFormController() { 
    var ctrl = this; 

    ctrl.entity = { 
     name: "this is the entity passed up" 
    }; 

    ctrl.save = function(event) { 
     console.log(event); 
     console.log("In component: " + ctrl.entity.name); 
     ctrl.onSave({ 
     //AND ON SAVE, we make the this controllers model-properties which you'd like to pass on a part of the event. 
     $event: { 
      entity: ctrl.entity 
     } 
     }); 
    }; 

    ctrl.cancel = function() { 
     ctrl.onCancel({ 
     entity: ctrl.entity 
     }); 
    }; 
    } 

    app.component(componentID, { 
    bindings: { 
     onSave: '&', 
     onCancel: '&' 
    }, 
    //Here also we pass the $event to function 
    template: '<h1> This is a test</h1><button type="button" ng-click="$ctrl.save($event);">Save</button>', 
    controller: TestFormController 
    }) 

}());