指令中需要父 FormController 的 Angular (scope?） 问题

人为的例子，但它演示了我遇到的问题。

我有一个表单，其中包含使用指令生成的输入。代码类似于以下内容。小提琴来了 http://jsfiddle.net/technicolorenvy/CFynn/2/

视图

    <div ng-controller="AppController">
        <form name="myForm">
            <input name="myInput" id="myInput" ng-model="myInputModel" ng-pattern="/'d+/" my-directive required/>
            <button type="submit" ng-click="submitForm()">Submit</button>
        </form>
    </div>

控制器

    app.controller('AppController', function ($scope) {
        $scope.submitForm = function () {
            console.log('form controller inside AppController submitForm()');
            console.log(angular.copy($scope.myForm));
            console.log('is the form valid? ' + $scope.myForm.$valid);
            console.log(' ');
        };
    });

命令

    app.directive('myDirective', function () {
        return {
            template: '<div><input/></div>',
            replace: true,
            restrict: 'A',
            require: '^form',
            compile: function (element, attrs) {
                // some setup here
                // move the id and ng-model down onto the enclosed input
                element.removeAttr('id').removeAttr('ng-model').removeAttr('name');
                element.find('input').attr('id', attrs.id).attr('ng-model', attrs.ngModel).attr('name', attrs.name);
                var inputName = attrs.name,
                    $input = element.find('input');
                if (attrs.required) {
                    element.removeAttr('required');
                    $input.attr('required', true);
                }
                if (attrs.ngPattern) {
                    element.removeAttr('ng-pattern');
                    $input.attr('ng-pattern', attrs.ngPattern);
                }
                return {
                    pre: function (scope, element, attrs, formCtrl) {
                        var patternErrs,
                        fakeNum = 1234;
                        $input.on('change', function () {
                            patternErrs = formCtrl.$error.pattern;
                            if (patternErrs && patternErrs.length > 0) {
                                angular.forEach(patternErrs, function (err) {
                                    if (err.$name === inputName) {
                                        $input.val(fakeNum);
                                        formCtrl[inputName].$setViewValue(fakeNum);
                                        formCtrl[inputName].$setValidity('pattern', true);
                                    }
                                });
                            }
                            console.log('formCtrl inside directive');
                            console.log(angular.copy(formCtrl));
                            console.log('is the form valid? ' + formCtrl.$valid);
                            console.log(' ');
                        });
                    }
                };
            }
        }
    });

在指令中，我在"生成的"输入上有一个onChange事件，该事件检查与此输入名称匹配的模式错误，然后如果有，则使用假值强制数据是我们需要的，使用setViewValue，然后使用setValidity设置有效性。

这行得通...有点。问题是，在第一次提交时，表单始终无效。您必须单击"提交"两次才能将表单视为有效。（步骤如下）

1. 在输入中输入一个字符串（例如"abcd"）
2. 输入模式验证失败，然后获得有效值 （1234）
3. 指令"myDirective"处理此+设置输入的值和有效性
4. 但是，在第一个sumbit上，表单无效
5. 在第二次提交时，无需更改输入，表单有效

那么我如何在不加强表单有效性的情况下使表单在第一次提交时有效（阅读，我不想手动将表单设置为有效）。这感觉像是一个范围界定问题，但如果是，我不太确定如何补救它。

谢谢！