javascript - 从 Angular $mdDialog 中访问表单

Question

我正在使用 Angular 1.5 Material Design $mdDialog按照推荐的方式，使用 controllerAs: "dialog" .在模板中我有一个表单:<form name="fooForm" .在模板中，我可以毫无问题地访问表单，例如ng-disabled="fooForm.$invalid || fooForm.$submitted" .

但是我如何从 $mdDialog 中访问该表单？ Controller ？根据我的阅读，我希望能够做到这一点:

    const doFoo = () => {
        if (this.fooForm.$dirty) {

在这里this是对话框 Controller 。

但我得到一个错误:TypeError: Cannot read property '$dirty' of undefined .果然，如果我在代码中放置一个断点， Controller 就没有 fooForm属性(property)。

我试过使用 $scope同样，但是当我在代码中放置断点时 $scope没有fooForm属性(property)。

这是我的对话模板:

<md-dialog aria-label="FooBar">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>FooBar</h2>
      <span flex></span>
      <md-button class="md-icon-button" ng-click="dialog.cancel()">
        <md-icon>close</md-icon>
      </md-button>
    </div>
  </md-toolbar>
  <form name="fooForm" ng-submit="dialog.ok()" novalidate>
    <md-dialog-content>
      <div layout="column" layout-padding>
        <h2 class="md-headline">Foo</h2>
        <div layout="row" layout-xs="column">
          ...
      </div>
    </md-dialog-content>
    <md-dialog-actions>
      <md-button class="md-primary" type="submit" ng-disabled="fooForm.$invalid || fooForm.$submitted">
        OK
      </md-button>
      <md-button ng-click="dialog.cancel()">
        Cancel
      </md-button>
    </md-dialog-actions>
  </form>
</md-dialog>

如何访问 $mdDialog 中的表单来自对话 Controller ？

Answer 1

您需要将表单分配给 Controller 的范围。通过将表单名称从 fooForm 更改为 dialog.fooForm 来执行此操作。

<form name="dialog.fooForm" ng-submit="dialog.ok()" novalidate>