angularjs - angular-froala 2.1.0 data-binding not working with angular 1.1.5 -
i'm working on project using angular 1.1.5. upgrading angular not option now.
we implement rich html5 wysiwyg-editor , dicided give froala try, meets our requirements , docs of angular-froala state should work versions of angular >=1.0 .
i have made poc on plunker 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-editor/2.1.0/css/plugins/file.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/fullscreen.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/image_manager.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/image.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/line_breaker.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/table.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/video.css"> <!-- include froala editor --> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/froala_editor.min.js"></script> <!-- include froala editor plugins --> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/align.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/char_counter.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/code_beautifier.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/code_view.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/colors.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/emoticons.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/entities.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/file.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/font_family.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/font_size.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/fullscreen.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/image.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/image_manager.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/inline_style.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/line_breaker.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/link.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/lists.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/paragraph_format.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/paragraph_style.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/quote.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/save.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/table.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/video.min.js"></script> <!-- end froala --> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js"></script> <script src="angular-froala.js"></script> <script src="app.js"></script> <link rel="stylesheet" href="app.css"> </head> <!-- define angular controller --> <body ng-controller="maincontroller"> <div class="sample"> <h2>sample 2: full editor</h2> <textarea id="froala-sample-2" froala ng-model="sample2text"></textarea> <h4>html content:</h4> {{sample2text}} </div> </body> </html> everything seems work fine except important part, data-binding. upgrading angular version 1.5.0 fixes issue in poc. mentioned not option in case.
is bug? documentation of froala-angular outdated? there kind of workaround besides upgrading angular? or missing here?
there seems issue version of angular when trying use ngmodel in directive.
https://github.com/angular/angular.js/issues/1924
when ngmodel directive used on element represents component (implemented via directive isolate scope), ngmodel locked isolate scope , in order out , make ngmodel useful ngmodel expression has prefixed $parent.
as suggested in thread tried using $parent prefix , notice 1 way data-binding finding place.
<textarea id="froala-sample-2" froala ng-model="$parent.sample2text"></textarea> to model updated, had call $apply() in froala-directive forces $digest().
ctrl.updatemodelview = function () { var returnedhtml = element.froalaeditor('html.get'); if (angular.isstring(returnedhtml)) { scope.$apply(function() { ngmodel.$setviewvalue(returnedhtml); }) } }; i updated poc on plunker want see running.
Comments
Post a Comment