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？

1 个答案: