How to determine if the angular.js model or scope has changed?

Question

Angular

Is there a built-in mechanism in angular that allows you to judge that the model or $scope has changed but not saved? Maybe some plugin .. Or at least tell me the keywords to search for, because. I didn't google anything.
In case of model change, I want to tint the dom element of the "changes not saved" type.
At the same time, I would not like to save to the server every time the model changes, in order to avoid albeit meager, but unnecessary traffic.
I would not like to subscribe to an event of the "onChange" type, unless of course there is one. I want to use a property with autobinding, just to pick it up and that's it.

Answer 1

There are no built-in tools.
It is more correct to write a directive that will listen for changes in the model. When saving, for example, you generate an event at which this directive saves the current value of the model. If the model and its last saved value do not match, the directive exposes a certain class on the element.

Answer 2

э не, это вам надо свой ватчер использовать... у формы есть $pristine/$dirty но оно поможет вам только один раз. Затем придется перезагружать для того что бы директива успешно переинициализировалась. Слишком кастомная задача.

Answer 3

I agree with Dmitry Dedukhin . The easiest way to do this is as a directive that will store the current model, which is associated with the input fields, and the last saved model, which will be compared with each time the current model changes (which is caught using the $watch-er). At the directive initialization stage, you need to initialize them with the same value. At the same time, do not forget that if your values ​​are not scalar, then you need to do angular.copy(), otherwise you will have references to the same object and it will always be equal to each other.

Answer 4

I will supplement the answer of Dmitry Dedukhin a little . You need to enter in the directive

...
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
   // ctrl - контроллер ngModel
}
...

Through the controller, you can access and add listeners on the $viewChangeListeners model change. The listener will be simple, no arguments, just a signal that the visual representation has changed.
More details here - https://docs.angularjs.org/api/ng/type/ngModel.NgM...