如何使用 TypeScript 访问 Angular 的 $scope.formName.$dirty 布尔值？

Posted 2023-03-13

【中文标题】如何使用 TypeScript 访问 Angular 的 $scope.formName.$dirty 布尔值？

【英文标题】：How do I access angular's $scope.formName.$dirty boolean with TypeScript?如何使用 TypeScript 访问 Angular 的 $scope.formName.$dirty 布尔值？

【发布时间】：2017-10-10 21:46:08

【问题描述】：

我有一个带有 name 属性的表单，我正在尝试使用 angular 的 $scope 变量来访问表单，以及它的 $dirty 布尔值。

问题是我正在使用 TypeScript，如果我将 $scope 变量的类型设置为来自definitelyTyped 的类型文件的接口ng.IScope 或ng.IFormController 之一，我无法输入类似

$scope.myFormINeedToAccess.$dirty

因为一切都是强类型的，如果我这样做了，我会得到错误，

Property 'myFormINeedToAccess' does not exist on type 'IScope'.

或

Property 'myFormINeedToAccess' does not exist on type 'IFormController'.

因为我同时被介绍给 AngularJS 和 TS，所以我没有在 javascript 中编写任何角度，但据我所知，$scope 变量（如果变量是正确的词的话）是全球可访问。因此，在任何级别的封装中，您都可以删除

$scope.(tons of options/stuff in the current view).(a bunch of additional options)

但我感觉很受限制，只能说

$scope.(15ish options defined by ng.IScope or ng.IFormController)

如何使用$scope: ng.IScope 或$scope: ng.IFormController 以使我可以通过语句成功访问$dirty 布尔值，

$scope.myFormINeedToAccess.$dirty

【参考方案1】：

1) 不要在 Typescript 中使用 $scope - 使用 controller as 语法。 2) 在控制器中创建ng.IFormController 类型的公共变量。 3) 将表单的name 设置为#2 中创建的变量。

html：

<div ng-controller="MyController as vm">
    <form name="vm.myForm">
        // form elements here
    </form>
</div>

控制器：

export class MyController() 
    public myForm: ng.IFormController;

    public someFunction(): void 
        if(this.myForm.$dirty) 
            // do something
        
    

我显然遗漏了相当多的管道代码，但这应该会给你大致的要点。

【讨论】：

天哪，非常感谢！这完全奏效了！我已经用头撞墙至少一个小时了，非常感谢！为什么它匹配这些名称，并在表单标签上的名称 attr 中使用 controllerAs 前缀使这些东西同步？这在某些角度文档中的某处有解释吗？

很高兴它有帮助！ Angular 在绑定到表单和表单元素时使用name 属性。当我刚开始的时候，这个问题也让我困惑了很长一段时间：如果你需要访问单个表单元素，你必须创建一个界面，因为 Typescript 对表单元素本身一无所知。跨度>