M. Jonckers February 2016

angular-froala 2.1.0 data-binding not working with angular 1.1.5

I'm currently working on a project using Angular 1.1.5. Upgrading Angular is not an option for now.

We would like to implement a rich HTML5 WYSIWYG-editor and dicided to give Froala a try, as it meets our requirements and the docs of angular-froala state that it should work with all versions of Angular >=1.0 .

I have made a POC on Plunker that uses Angular 1.1.5.

<!DOCTYPE html>

<!-- define angular app -->
<html ng-app="myApp">

<head>
  <script src="https://code.jquery.com/jquery-2.2.0.js"></script>

  <!-- Include Font Awesome. -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-3dkvEK0WLHRJ7/Csr0BZjAWxERc5WH7bdeUya2aXxdU= sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg=="
  crossorigin="anonymous">
  <!-- Include Froala Editor styles -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/froala_editor.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/froala_style.min.css" />

  <!-- Include Froala Editor Plugins styles -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/char_counter.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/code_view.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/colors.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/emoticons.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-ed        

Answers


M. Jonckers February 2016

There seems to be an issue with this version of Angular when trying to use ngModel in a directive.

https://github.com/angular/angular.js/issues/1924

When ngModel directive is used on an element that represents a component (implemented via a directive with isolate scope), ngModel is locked into this isolate scope and in order to get out and make ngModel useful the ngModel expression has to be prefixed with $parent.

As suggested in this thread I tried using the $parent prefix and could notice one way data-binding finding place.

<textarea id="froala-sample-2" froala ng-model="$parent.sample2Text"></textarea>

To get my model to be updated, I had to call $apply() in the froala-directive which forces a $digest().

ctrl.updateModelView = function () {
    var returnedHtml = element.froalaEditor('html.get');
    if (angular.isString(returnedHtml)) {
        scope.$apply(function() {
            ngModel.$setViewValue(returnedHtml);
        })
    }
};

I updated my POC on plunker for those who want to see it running.

Post Status

Asked in February 2016
Viewed 3,246 times
Voted 11
Answered 1 times

Search




Leave an answer