【问题标题】:Forms-angular, how a custom directive field can affect the $pristine state of the full record?Forms-angular,自定义指令字段如何影响完整记录的 $pristine 状态?
【发布时间】:2023-03-21 17:24:01
【问题描述】:

关于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()?

【问题讨论】:

    标签: angularjs angularjs-directive mongoose


    【解决方案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() 启用保存按钮,其中元素是指令的链接函数的参数。这听起来不错吗?
    • 似乎是。我想不出会发生什么改变来阻止它工作,而且它非常优雅,效率也不错。
    猜你喜欢
    • 1970-01-01
    • 2019-08-06
    • 1970-01-01
    • 1970-01-01
    • 2015-11-10
    • 2017-03-18
    • 2021-05-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多