angularjs: ngModelController не найден в FormController

Question

У меня есть две директивы, одна из них - моя форма, одна - мое поле.
Все работает хорошо, но я не могу получить ngModelController полей ввода.
Так что я не могу получить $ грязные, $ действительные свойства этих полей.
Например, при отправке я хочу получить ngModelController ввода с именем «field1», но я не могу его получить.
вид.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: '=' 
        }       
       } 
      }) 
    ;