Don't use a watcher on model.value

[mattbrailsford]

Angular watchers are notoriously inefficient so should be avoided where possible. With that in mind, there are a few "special" Umbraco features you can make use of to achieve the same without the watcher overhead. A bare bones example would be

// here we declare a special method which will be called 
// whenever the value has changed from the server
$scope.model.onValueChanged = function (newVal, oldVal) {
  // Model value changed so update UI
  updateUi()
};

var unsubscribe = $scope.$on("formSubmitting", function () {
  // Write data back to the model.value
  $scope.model.value = ...
});

$scope.$on('$destroy', function () {
  unsubscribe();
});

Ultimately Umbraco checks for the special method onValueChanged and uses that to notify you if the model on the server changes, and the formSubmitting event gets fired when the form is about to send to the server, so you can hold off writing to $scope.model.value until the very last minute. The $destroy event handler just does some cleaning up to prevent memory leaks.

[PeteDuncanson]

This is great stuff Matt, will get this added into our wrapper and updated. Funny that these life cycle methods remind me of the ones in React with componentWillUpdate etc. :)

[cssquirrel]

Thanks for the tip, @mattbrailsford. I'll look at putting that in, and update the connected article accordingly! :)