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

Question

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

索引：

<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 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 指南是怎么说的："use controller when you want to expose an API to other directives. Otherwise use link."

所以，我修改了你的指令以使用 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。

希望对您有所帮助！

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

Using an inline form directive multiple times to update to an array of objects

angularjs

angularjs-directive

angularjs-scope