angularjs 自定义表单和字段指令：在 FormController 中找不到 ngModelController

Question

我有 2 个指令，一个是我的表单，一个是我的字段。
我需要为这两个指令都使用动态创建html内容的模式。

一切正常，除了我无法获取输入字段的 ngModelController。
所以我无法获取这些字段的$dirty、$valid 属性。比如提交的时候想获取name为"field1"的input的ngModelController，但是获取不到
form.field1 未定义。
在 FormController "form1" 中，没有字段，任何人都可以帮助解决这个问题？
非常感谢

fiddle中的代码是： https://jsfiddle.net/0td5hLur/3/

主要代码如下：

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', ['$compile', function($compile) {
                    return {
                        restrict: 'E',
                        replace: true,
                        scope: {
                            config: '='
                        },
                        compile: function(element, attrs, transclude) {
                            return {
                                pre: function (scope, iElement, iAttrs, controller) {
                                    console.log('-------myForm');
                                    var html = '<form name="{{config.name}}">' +
                                            '   <my-field ng-repeat="item in config.fields" config="item"></my-field>' +
                                            '    <button ng-click="submit()">submit</button>' +
                                            '</form>';
                                    iElement.append($compile(html)(scope));
                                    scope.obj = {
                                        field1: '1',
                                        field2: '2'
                                    };
                                    scope.submit = function () {
                                        var form = scope[scope.config.name];
                                        console.log(form);
                                        alert(form.field1);
                                        alert(form.field1.$dirty);        // error here
                                    }
                                }
                            };
                        }
                    }
                    }])
                        .directive('myField', ['$compile', function($compile) {
                            return {
                                restrict: 'E',
                                replace: true,
                                scope: {
                                    config: '='
                                },
                                compile: function(tElement, tAttrs, transclude) {
                                    return {
                                        pre: function(scope, iElement, iAttrs, controller) {
                                            var config = scope.config;
                                            var html = '<input type="' + config.type + '" ng-model="' + config.model + '" name="' + config.name + '" />';
                                            iElement.after($compile(html)(scope.$parent));
                                            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

自己试了一下，只修改了几行，确实不容易。
最终的工作代码如下：

我错过的是以下几行：
iElement.after(html);
变量元素 = iElement.next();
iElement.remove();
$compile(element)(scope.$parent);

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', ['$compile', function($compile) {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      config: '='
    },
    link: function (scope, iElement, iAttrs, controller) {
      console.log('-------myForm');
      var html = '<form name="{{config.name}}">' +
          '   <my-field ng-repeat="item in config.fields" config="item"></my-field>' +
          '    <button ng-click="submit()">submit</button>' +
          '</form>';
      iElement.append($compile(html)(scope));
      scope.obj = {
        field1: '1',
        field2: '2'
      };
      scope.submit = function () {
        var form = scope[scope.config.name];
        console.log(form);
        alert(form.field1);
        alert(form.field1.$dirty);        // error here
      }
    }
  }
}])
.directive('myField', ['$compile', function($compile) {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      config: '='
    },
    link: function(scope, iElement, iAttrs, controller) {
      var config = scope.config;
      var html = '<input type="' + config.type + '" ng-model="' + config.model + '" name="' + config.name + '" />';
      iElement.after(html);
      var element = iElement.next();
      iElement.remove();
      $compile(element)(scope.$parent);
    }
  }
}])
        ;

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

angularjs 自定义表单和字段指令：在 FormController 中找不到 ngModelController

angularjs custom form and field directive: ngModelController is not found in FormController

directive

angularjs