在角度材料 md 对话框中使用带有所需 ^form 的指令

Posted 2023-02-22

【中文标题】在角度材料 md 对话框中使用带有所需 ^form 的指令

【英文标题】：Use directive with required ^form in an angular-material md-dialog

【发布时间】：2016-08-13 14:24:57

【问题描述】：

Plunker 可用here

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

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

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

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

我的问题是：当表单在对话框之外定义时，有什么方法可以在 md 对话框中使用带有“所需表单”的指令？

我想这是因为 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()
  );

提前感谢您的帮助！

【问题讨论】：

不完全确定你想要实现什么，但像这样codepen.io/z00bs/pen/VadJxV?

感谢您的评论。我想完全实现你的 plunker 的行为。但是，在您的示例中，表单位于对话框内容中，而在我的问题中，表单位于打开对话框的视图中（因为对话框之外还有其他相同表单的输入）。我已经 fork 你的 plunker here，移动表单，问题仍然存在......

我仍然没有得到用例，但有什么阻止你将 <first /> 包装在单独的 <form> 中，就像在 codepen.io/z00bs/pen/vGaBgm 中一样？

再次感谢。老实说，我理所当然地认为这应该只使用一种形式就可以实现，而我排除了其他可能性，我的错。重新考虑我的用例，我认为您是对的，为对话框使用单独的表单没有问题。如果您使用最后一个 plunker 发布答案，我会接受。谢谢

【参考方案1】：

从 cmets 中提取：

我仍然没有得到用例，但做了一些事情阻止您将 <first /> 包装在单独的 <form> 中，就像在 codepen.io/z00bs/pen/vGaBgm 中一样