Forms-angular，自定义指令字段如何影响完整记录的 $pristine 状态？

Posted 2023-03-11

【中文标题】Forms-angular，自定义指令字段如何影响完整记录的 $pristine 状态？

【英文标题】：Forms-angular, how a custom directive field can affect the $pristine state of the full record?

【发布时间】：2014-10-29 13:51:50

【问题描述】：

关于forms-angular项目的问题。

序言

forms-angular 的默认formInput 指令可以通过在扩展猫鼬模型中指定form.directive 属性被自定义指令覆盖，

var CategorySchema = new Schema(
    name: String,
);


var PlansSchema = new Schema(
    categories: 
        type: [CategorySchema],
        form: 
            directive: 'plan-categories'
        
    
);

自定义 plan-categories 指令有一个模板，可以在其中编辑 [CategorySchema] 的字段。

什么工作

让我们从第一个简单的模板开始：

<div>
    <div ng-repeat="category in record.categories">
        <input ng-model="category.name" />
    </div>
</div>

Forms-angular 可以成功检测绑定到数据的这些自定义 plan-categories 指令输入字段（注入的 scope.record）中的更改。特别是当用户改变上述输入字段的值时，页面的“保存”按钮被启用，允许保存操作。

由于在父 formInput 的 BaseCtrl 范围 false === $scope[$scope.topLevelFormName].$pristine 中进行了以下比较，保存按钮的激活（参见 base.js）。

不工作

现在，当使用表达式或 ng-click 调用的函数更改 category.name 变量时，保存按钮不会启用，如下所示：

<div>
    <div ng-repeat="category in record.categories">
        <input ng-model="category.name" />
        <button ng-click="category.name = 'Hello'">Edit</button>
    </div>
</div>

单击按钮时，category.name 变量似乎已正确更改，因为输入中的值已相应更改。不幸的是，“保存”按钮一直处于禁用状态。

注意：我还尝试将方法传递给 ng-click （从自定义指令的 link 方法中注入的范围）并在 $timeout 调用中设置 category.name 变量，但未成功。

我猜输入字段的ng-model 指令调用了父级的（多祖先？）$setDirty() 方法。

问题

我如何神奇地获得由 forms-angular 调用的 $setDirty() 以启用“保存”按钮

如果不可能：

如何在更改record.categories 元素时访问 BaseCtrl 范围并调用 $setDirty()？

【参考方案1】：

临时我想不出一个神奇的解决方案，但绝对非神奇的方法是依赖 $data.baseScope（请参阅https://github.com/forms-angular/forms-angular/blob/master/js/controllers/base.js#L12），它可以节省大量的 $parents。

【讨论】：

似乎 $data.baseScope 在单击按钮时未定义。在指令链接方法中，执行console.log($data.baseScope) 很好（浏览器控制台延迟），但在同一位置执行$data.baseScope.$setDirty() 失败，因为$data.baseScope 未定义。

通过查看 BaseCtrl 范围的setFormDirty() 代码，我可以使用element.inheritedData('$formController').$setDirty() 启用保存按钮，其中元素是指令的链接函数的参数。这听起来不错吗？

似乎是。我想不出会发生什么改变来阻止它工作，而且它非常优雅，效率也不错。