不传递事件的组件的AngularJS动态编译

Question

我使用modals来显示给用户的表单。这些表单都是带有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

请检查代码，经过一些调试后，您似乎忘了将该实体作为监听单击$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
  })

}());