获得一个伪指令中的窗体控件

Question

我工作的一个AngularJS应用程序，并创建了一个指令内两种形式。我想重置两个窗体的$提交$ setSubmitted（假的），然而，问题是，我不能在指令控制器内同时获得两个控件。

提到这个解决方案How to handle multiple forms present in a single page using AngularJS。然而，该解决方案是一个控制器，而不是一个指令。

(function () {
  'use strict';
  angular
    .module('app')
    .directive('multiForms', multiForms);

  function multiForms() {
    return {
      restrict: "A",
      scope: {
      },
      controller: function ($scope) {

        $scope.functions = {
            submit1: submit1,
            submit2: submit2,
            resetForms: resetForms
        };

        function resetForms() {
            $scope.form1.$setSubmitted(false);
            $scope.form2.$setSubmitted(false);
        }

      },
      replace: false,
      templateUrl: 'pathToTheHtml.html'
    }
  }

})();

<div>
    <form name="form1" ng-submit="functions.submit1()">
        <ng-form name="form1">
            <input type="text" ng-model="text1">
            <button type="submit">Submit1</button>
        </ng-form>
    </form>
    <form name="form-2" ng-submit="functions.submit2()">
            <ng-form name="form2">
                <input type="text" ng-model="text2">
                <button type="submit">Submit2</button>
            </ng-form>        
    </form>
    <button ng-click="functions.resetForms()"></button>
</div>

预期结果是$提交的值设置为false两个Form 1和Form。实际的结果是既$ scope.form1和$ scope.form2是不确定的。

Answer 1

我被玩弄，这实际工作。我添加虚拟机，并与视图绑定。

(function () {
  'use strict';
  angular
    .module('app')
    .directive('multiForms', multiForms);

  function multiForms() {
    return {
      restrict: "A",
      scope: {
      },
      controller: function ($scope) {

        const vm = this;

        vm.functions = {
            submit1: submit1,
            submit2: submit2,
            resetForms: resetForms
        };

        function resetForms() {
            vm.form1.$setPristine();
            vm.form2.$setPristine();
        }

      },
      controllerAs: 'vm',
      bindToController: true,
      replace: false,
      templateUrl: 'pathToTheHtml.html'
    }
  }

})();

<div>
    <form name="vm.form1" ng-submit="vm.functions.submit1()">
        <ng-form name="form1">
            <input type="text" ng-model="vm.data.text1">
            <button type="submit">Submit1</button>
        </ng-form>
    </form>
    <form name="vm.form-2" ng-submit="vm.functions.submit2()">
            <ng-form name="form2">
                <input type="text" ng-model="vm.data.text2">
                <button type="submit">Submit2</button>
            </ng-form>        
    </form>
    <button ng-click="vm.functions.resetForms()"></button>
</div>