Question

我需要能够有多个内联表单在保存后更新到一个数组中。他们还需要能够保持自己的价值而不是重置。

INDEX：

<body ng-app="formExample">
  <div ng-controller="ExampleController">
  <form-example></form-example>
  <form-example></form-example>

  <pre>master = {{master | json}}</pre>
  <pre>forms = {{forms | json}}</pre>
</div>

FORM：

<form novalidate class="simple-form">
  Name: <input type="text" ng-model="user.name" /><br />
  E-mail: <input type="email" ng-model="user.email" /><br />
  Gender: <input type="radio" ng-model="user.gender" value="male" />male
  <input type="radio" ng-model="user.gender" value="female" />female<br />
  <input type="button" ng-click="reset()" value="Reset" />
  <input type="button" ng-click="update(user)" value="Save" />
</form>
<pre>form = {{user | json}}</pre>

JS：

angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.user = {};
      $scope.forms = [];

    }]);

  angular.module('formExample').directive('formExample', function(){
    return {
      restrict: 'E',
      templateUrl: 'form.html',
      scope: {},
      controller: function() {
        $scope.maseter = {};
        $scope.update = function(user) {
          $scope.master = angular.copy(user);
          $scope.forms.push($scope.master);
        };
        $scope.reset = function() {
          $scope.user = angular.copy($scope.master);
        };

        $scope.reset();
      }
    }
  });

基本上，Plunker这是我想要实现的基本概念。我最大的问题是，ng-clicks无法正常工作，或者只是第一次工作。

目前，ng-model甚至没有绑定。

Answer 1

我今天刚刚阅读，关于Angular指令的Google指南说：“当你想将API暴露给其他指令时使用控制器。否则使用链接。”

所以，我修改了你的指令使用link：

angular.module('formExample').directive('formExample', function(){
  return {
    restrict: 'E',
    templateUrl: 'form.html',
    scope: {
      forms: '='
    },
    link: function(scope, elem, attrs) {
      scope.master = {};
      scope.user = {};
      scope.update = function(user) {
        scope.master = angular.copy(scope.user);
        scope.forms.push(scope.master);
      };
      scope.reset = function() {
        scope.user = angular.copy(scope.master);
      };
      scope.reset();
    }
  }
});

请注意，表单通过以下方式传递给指令：

<form-example forms="forms"></form-example>

其他方面，请参阅Plunker。

我希望这有帮助！

多次使用内联表单指令更新为对象数组

1 个答案: