Получение элементов управления внутри директивы - PullRequest
Новая
       7

Получение элементов управления внутри директивы

0 голосов
/ 03 февраля 2019

Я работаю над приложением AngularJS и создал две формы внутри директивы.Я хочу сбросить обе формы $, отправленные с помощью $ setSubmitted (false), однако проблема в том, что я не могу получить два элемента управления одновременно внутри контроллера директивы.

Ссылка на это решение Какобрабатывать несколько форм, представленных на одной странице, используя 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>

Ожидаемый результат состоит в том, чтобы установить $ submit значение false как для form1, так и для form2.Фактический результат - $ scope.form1 и $ scope.form2 не определены.

1 Ответ

0 голосов
/ 04 февраля 2019

Я играл, и это действительно сработало.Я добавил VM и связал с видом. 

(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>
...