AngularJS動態編譯組件不會向上傳遞事件

Question

我正在使用模式來顯示呈現給用戶的表單。 表單都是具有onSave和onCancel方法的組件

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

我想將要在模態中顯示的表單的標簽傳遞給模態，然后將組件的onSave / onCancel事件返回的參數傳遞回模態，該模態會將其返回給調用方。 為此，我放置了一個指令，該指令設置組件的屬性，然后通過$ compile方法運行該組件以生成它：

 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
    }

然后，我調用指令並從通用模態框中傳遞適當的屬性，如下所示：

 <form-generator 
                form-type="vm.ui.properties.formType"
                on-save="vm.ok(entity)"
                on-cancel="vm.cancel(entity)"
                assigned-entity="vm.returnItem.entity"
                read-only="vm.ui.properties.readOnly">
            </form-generator>

這將成功生成指定的表單組件，並將每個屬性的正確值向下傳遞到表單組件。 我的問題是，當組件拋出onSave或onCancel事件時，模態控制器正在接收該事件（調用了vm.ok或vm.cancel），但是傳遞給這些事件的參數沒有隨調用一起傳遞。 傳遞給vm.ok和vm.cancel的屬性始終未定義。

從組件中，我這樣調用onSave / onCancel方法：

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

並且我已經證實ctrl.entity實際上具有價值。

關於為什么傳遞回調用樹的參數在到達模態控制器時尚未定義的想法？

我創建了這個plunkr來幫助定義我遇到的問題： 示例

Answer 1

請查看代碼，在進行一些調試之后，好像您只是忘記附加實體一樣，將其作為偵聽click $ event的函數的一部分。 這是工作中的小伙子 。

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

}());