javascript - 使用 ngModel 的 Angular 递归指令

Question

最近我学到了很多关于递归指令的知识，但还有一些我还没有明白。

这篇文章特别解决了我的大部分问题:Recursion in Angular directives (谢谢!!)

我已经基于这种技术构建了一个递归规则编辑器指令，它可以完成我想要的大部分工作。它成功地编辑了描述消息处理规则的复杂 JSON 结构，允许您添加和删除层次结构级别以及编辑值。

该指令旨在像这样简洁地实例化:

<rule-element rule="<scope variable>"></rule-element>

理想情况下，我希望此指令作为表单的一部分运行，带有验证信号，并且我读到的所有内容都告诉我我需要使用 ngModel 进行绑定(bind)。但是，该示例以及我的代码不使用 ngModel，而是选择使用属性和本地隔离范围。

我读到使用带隔离作用域的 ngModel 很棘手(Isolated scope pitfall with ng-model dependency)，而我使用 ngModel 的打地鼠式路径并不是很成功，所以我最终只使用了双向绑定(bind)在一个属性上。

添加此元素所需的钩子(Hook)以向其包含的表单报告的最佳方法是什么，以便我可以使用 Angular 验证来显示消息并启用/禁用提交按钮？

我确定我可以以某种方式解决这个问题，但我这样做的主要动机是学习正确的方法，所以，呃，我来了。

这是我正在进行的工作指令的一个 plunkr:http://plnkr.co/edit/02b9zTS1O81wgVapn3eg?p=preview

有什么建议吗？

Answer 1

我还有复杂的验证要求。在我的例子中，我从服务器获取了一个 json，其中包含相关输入字段的错误消息。它仅依赖于字段名称(也是数组并与 ng-repeat 嵌套，如 attr[34].part。这就是为什么我将括号和点替换为有效标识符的原因)。

在这种情况下，我有一个包含所有属性错误消息的范围对象(我有另一个函数手动重置有效性，因为它在另一次提交后仍然存在)。

我不知道这对你是否有用，但它可能会给你一个想法。

$scope.setValidationErrors = function ( error ) {

    $scope.myForm.$setValidity( "validation", false );
    if ( error.data ) {
        // Add error messages
        for ( var err in error.data ) {
            var sanitizedErr = err.replace( /[.\[\]]/g, '-' );
            if ( error.data.hasOwnProperty( err ) && $scope.showProviderForm[sanitizedErr] ) {
                $scope.myForm[sanitizedErr].$setValidity( "validation", false );
                $scope.myForm[sanitizedErr].$setPristine();
            }
        }
        $scope.errors = error.data;
    }
};