Как я могу обработать 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>