在 angular-material md-dialog 中使用带有所需 ^form 的指令

Question

Plunker available here

我想在 angular-material md 中包含一个指令（示例中的 first 指令）和必需的 ^form -对话。显示对话框时，出现错误提示找不到表单：

[$compile:ctreq] Controller 'form', required by directive 'first', can't be found!

我正在使用 require:^form 因为我想用 ng-messages 验证指令中父表单的某些字段。对话框外的指令按预期工作并且表单输入已正确验证，仅当我在对话框内使用指令时才会出现此问题。

我尝试包含另一个指令（示例中的 second 指令），但没有 require:^form，它在对话框中正确显示，但在这种情况下无法验证输入。

我的问题是：当在对话框外定义表单时，有没有办法在 md 对话框中使用带有 "form required" 的指令？

我想这是因为 mdDialog 正在创建自己的作用域...我尝试过传递当前作用域、创建新作用域等，但到目前为止没有成功。

问题可以很容易地在附加的 plunker 中重现。

相关来源供参考：

function first() {
    var directive = {
      restrict: 'EA',
      scope: {
        param: '@'
      },
      require: '^form',
      bindToController: true,
      template: '<md-input-container class="md-block"><label>Street with validation</label><input name="street" ng-model="vm.street" required><div ng-messages="form.street.$error"><div ng-message="required">Required</div></div></md-input-container>',
      controller: FirstController,
      controllerAs: 'first',
      link: function(scope, element, attrs, form) {
        scope.form = form;
      }
    };

    FirstController.$inject = [];

    function FirstController() {
      var first = this;
    }
    return directive;
  }


function openDialogFail(event) {
  $mdDialog.show({
    template: '<md-dialog><md-dialog-content><first/></md-dialog-content></md-dialog>',
    targetEvent: event,
    controller: () => this //,
      // scope: $scope.$new()
  });
}

在此先感谢您的帮助！

Answer 1

摘自评论：

I still don't get the use case but does something stop you from wrapping <first /> within a separate <form> like in codepen.io/z00bs/pen/vGaBgm

在 angular-material md-dialog 中使用带有所需 ^form 的指令

Use directive with required ^form in an angular-material md-dialog

javascript

angularjs

angularjs-scope

angular-directive

angular-material