在angular-material md-dialog中使用帶有必需^形式的指令

Question

可以在這里使用 Plunker

我想在angular-material md-dialog中包含一個帶有必需^form的指令（示例中的第一個指令）。 顯示對話框時，表示無法找到表單時出錯：

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

我正在使用require:^form因為我想用ng-messages驗證指令中父表單的一些字段。 對話框外的指令按預期工作，表單輸入正確驗證，問題只發生在我在對話框中使用指令時。

我試圖包含另一個指令（示例中的第二個指令），沒有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

摘自評論：

我仍然沒有得到用例但是阻止你將<first />包裝在一個單獨的<form>就像在codepen.io/z00bs/pen/vGaBgm中一樣