ngModel.$render is not called when model change

Question

I'm trying to use tiny-mce with angular, but i have some trouble with the $render function in the directive. When i update the model, the $render function is not call.

Here a plunkr to illustrate: http://plnkr.co/edit/Ih1nDq?p=preview

I'm not sure, but i think it could be related to angular 1.2, because with angular 1.1.5, it works : http://plnkr.co/edit/LXAtHd?p=preview

Is this a bug of angular 1.2, or did i miss something new with angular 1.2?

Answer 1

As far as I can see, the $render function is only called once. If you need to update your view on model changes you can add a function to the $viewChangeListeners Array:

ngModel.$viewChangeListeners.push(function () {
    updateView(ngModel.$viewValue);
});

I hope someone could give some more details why $render behaves different in Angular 1.2.

Answer 2

This answer shows code you need in your directive to make render fire off when necessary:

TinyMCE <textarea> two way bound with AngularJS

        // When your model changes from the outside, use ngModel.$render to update the value in the textarea
        ngModel.$render = function () {
            textarea.val(ngModel.$viewValue);
        };

Also compare to this render function from angular-ui-tinymce ( https://github.com/angular-ui/ui-tinymce )

    ngModel.$render = function() {
      if (!tinyInstance) {
        tinyInstance = tinymce.get(attrs.id);
      }
      if (tinyInstance) {
        tinyInstance.setContent(ngModel.$viewValue || '');
      }

Plnkr: http://plnkr.co/edit/04AFkp?p=preview

However depending on the timing of the loading of your DOM you may need to set the priority on your directive upwards. :-)