如何处理组件中的 isDirty？

Posted 2023-02-23

【中文标题】如何处理组件中的 isDirty？

【英文标题】：How can I handle isDirty in a component?

【发布时间】：2017-05-11 20:57:55

【问题描述】：

我正在使用 Angular 1.5 并正在创建一个自定义下拉菜单。没有涉及使用 ngModel 的元素。我希望能够让表单知道我的组件是否脏、原始等。我的想法是我会使用 ngModel，就像我会使用指令一样。但是，由于组件中没有链接功能，我不确定如何执行此操作。甚至可能吗？

假设我的组件模板是这样的：

<div>model.Value</div>

我的代码是这样的：

angular.component('myThing',  
    bindings: 
        model: '='
    ,
    require: '^ngModel'
)
.controller('myThingController', () => 
    // stuff and things
);

我做了一个非常简单的示例，而不是我的所有代码，因为我什至不确定从哪里开始在组件中使用 ngModel。我认为让我转储代码对任何人都没有好处。如果需要更多代码，请随时询问，我会很乐意扩展我的示例。

我创建了一个简单的笔来尝试解决这个问题：http://codepen.io/yatrix/pen/rWEJYV?editors=1011

【问题讨论】：

您可以在组件声明中使用require: ngModel: '^ngModel' 。

@LenilsondeCastro 我在哪里可以访问 ngModel 的好东西？由于没有链接功能，我必须将其注入我的控制器吗？

您可以通过控制器上下文访问，即控制器内的this.ngModel。

@LenilsondeCastro 介意看看我的笔吗？ codepen.io/yatrix/pen/rWEJYV?editors=1011我没看到你在说什么。

【参考方案1】：

您可以在组件声明中使用require: ngModel: '^ngModel' 。您可以通过控制器上下文访问，即控制器内的this.ngModel。

下面的sn-p根据你的codepen实现一个例子。

var app = angular.module('app', []);

app.controller('ctrl', ($scope) => 
  $scope.model = 
    value: "Hello"
  ;
);

app.component('myThing', 
  require: 
    ngModel: '^ngModel'
  ,
  template: '<div>$ctrl.ngModel.value</div><br/><button type="button" ng-click="$ctrl.doSomething()">Click This</button>',
  bindings: 
    ngModel: '='
  ,
  controller: function() 
    this.doSomething = function() 
      console.log(this.ngModel);
    
  
);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">

  <my-thing ng-model="model"></my-thing>

</div>

【讨论】：

我期待通过 ngModel 访问 NgModelController。也许我问错了问题……不过，我非常感谢您的帮助。

@Yatrix ops，你应该得到ngModelController，对此感到抱歉。在您的代码笔上，您以未命名的方式使用了require（即require: '^ngModel'，因此您必须改用this.controllers[0]。无论如何，我已经更新了我的答案，现在您有正确的@ sn-p 上的 987654330@，例如：`require: ngModel: '^ngModel' 。

啊，好的。我从未见过您使用的语法，所以我没有意识到这一点。谢谢！

@Yatrix 我认为它仅适用于组件，无论如何，还有什么？如果与此问题相关，请发表评论，我会在这里提供帮助，干杯：D

一件小事 - 我注意到“你好”文本没有出现。是否需要通过 ngModel 以不同方式显示？