angularjs：FormControllerでngModelControllerが見つかりません

Question

私は2つの指令を持っています.1つはmy-form、もう1つはmy-fieldです。
入力フィールドのngModelControllerを取得できないことを除いて、すべてうまく動作します。
これらのフィールドの$ dirty、$ validプロパティは取得できません。
例えば、投稿するとき、名前 "field1"の入力のngModelControllerを取得したいが、取得できない。
form.field1は未定義です。
FormController "form1"には、フィールドはありません。
多くのおかげ

フィドルのコードは以下の通りです：
https://jsfiddle.net/luneyq/0td5hLur/2/

主なコードは、以下のとおりです。

 angular.module('myApp', []) 
 
       .controller('MyController', ['$scope', function ($scope) { 
 
        $scope.config = { 
 
         name: 'form1', 
 
         fields: [ 
 
          {type: 'text', name: 'field1', model: 'obj.field1'}, 
 
          {type: 'text', name: 'field2', model: 'obj.field2'} 
 
         ] 
 
        }; 
 
       }]) 
 
       .directive('myForm', function() { 
 
        return { 
 
         restrict: 'E', 
 
         replace: true, 
 
         template: '' + 
 
          '<form name="{{config.name}}">' + 
 
          ' <my-field ng-repeat="item in config.fields" config="item"></my-field>' + 
 
          ' <button ng-click="submit()">submit</button>' + 
 
          '</form>', 
 
         scope: { 
 
          config: '=' 
 
         }, 
 
         link: function(scope, el, attr) { 
 
          scope.obj = {}; 
 
          scope.submit = function() { 
 
           var form = scope[scope.config.name]; 
 
           alert(form.field1); 
 
           alert(form.field1.$dirty);  // error here 
 
          } 
 
         } 
 
        } 
 
       }) 
 
       .directive('myField', ['$compile', function($compile) { 
 
        return { 
 
         restrict: 'E', 
 
         replace: true, 
 
         link: function(scope, iElement, iAttrs) { 
 
          scope.config = scope.$eval(iAttrs.config); 
 
          var config = scope.config; 
 
          var html = '<input type="' + config.type + '" ng-model="' + config.model + '" name="' + config.name + '" />'; 
 
          iElement.after($compile(html)(scope)); 
 
          iElement.remove(); 
 
         } 
 
        } 
 
       }]) 
 
     ;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyController"> 
 
    <my-form config="config"></my-form> 
 
</div>

Answer 1

私はそれを試してみましたが、いくつかの行を修正しましたが、それは本当に簡単な仕事ではありませんでした。
は親切に別のポストを参照してください：

angularjs custom form and field directive: ngModelController is not found in FormControllerenter link description here

Answer 2

はこれを試してみてください：

angular.module('myApp', []) 
      .controller('MyController', ['$scope', function ($scope) { 
       $scope.config = { 
        name: 'form1', 
        fields: [ 
         {type: 'text', name: 'field1', model: ''}, 
         {type: 'text', name: 'field2', model: ''} 
        ] 
       }; 
      }]) 
      .directive('myForm', function() { 
       return { 
        restrict: 'E', 
        replace: true, 
        template: '' + 
         '<form name="{{config.name}}">' + 
         ' <my-field ng-repeat="item in config.fields" field="item"></my-field>' + 
         ' <button ng-click="submit()">submit</button>' + 
         '</form>', 
        scope: { 
         config: '=' 
        }, 
        link: function(scope, el, attr) { 
         scope.submit = function() { 
           var form = scope[scope.config.name]; 
           angular.forEach(scope.config.fields, function(item){ 
            console.log(item.name + ": " + form[item.name].$dirty); 
          });         
         } 
        } 
       } 
      }) 
      .directive('myField', function() { 
       return { 
        restrict: 'E', 
        replace: true, 
        template: '' + 
         '<input type="{{field.type}}" ng-model="field.model" name=" {{field.name}}" />', 
        scope: { 
         field: '=' 
        }       
       } 
      }) 
    ;