Question

这是一个人为的例子，但它表明了我遇到的一个问题。

我有一个表单，其中包含使用指令生成的输入。代码类似于以下内容。小提琴在这里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(' ');
                        });
                    }
                };
            }
        }
    });

在指令中，我在＆＃39;生成的＆＃39;上有一个onChange事件。检查与此输入的名称匹配的模式错误的输入，如果有，请使用setViewValue强制数据为我们需要的假值，然后使用{{1}设置有效性}。

这有点......问题是，在FIRST提交时，表单始终无效。您必须单击提交TWICE才能使表格有效。（步骤如下）

在输入
输入未通过模式验证，然后获取有效值（1234）
指令＆＃39; myDirective＆＃39;处理此项+设置输入的值和有效性
但是，在FIRST汇总时，表格无效
在SECOND提交时，表单无效，

那么如何在第一次提交时使表格有效而不强调表格的有效性（请阅读，我不想手动设置表格有效）。这感觉就像一个范围问题，但如果是，我不太确定如何补救它。

谢谢！

Answer 1

一旦改变范围，您需要在更改事件中调用scope.$apply()。

那说.. 我不确定你在这里尝试做什么。

好像你可能试图以复杂的方式解决一个简单的问题。很明显代码不是很可测试的。也许正在做的一些实际上是“业务逻辑”，可以封装在控制器中？

这里的确切目标是什么？

Answer 2

你的$ input.on（'change'）中的代码永远不会消化......也就是说，Angular从来不知道在你的更改事件之后运行它的所有手表和内部程序。所以它在第一次摘要期间运行它，这是在你第一次运行Submit时发生的。

我认为如果你在$ timeout（）中使用该位或使用$ scope。$ apply（）它会解决问题。

Angular（范围？）在需要父FormController的指令中发布

2 个答案: