如何处理组件中的 isDirty？

Question

我正在使用 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

Answer 1

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

以下代码片段根据您的 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>

如何处理组件中的 isDirty？

How can I handle isDirty in a component?

components

angularjs

angularjs-ng-model

angularjs-components