angular-froala 2.1.0 привязка данных не работает с угловым 1.1.5

В настоящее время я работаю над проектом с использованием Angular 1.1.5. Модернизация Angular на данный момент не является вариантом.angular-froala 2.1.0 привязка данных не работает с угловым 1.1.5

Мы хотели бы реализовать богатый HTML5 WYSIWYG-редактор и посоветовать Froala попробовать, так как он соответствует нашим требованиям, и docs состояния угловой флары, что он должен работать со всеми версиями Angular> = 1.0.

Я сделал POC на Plunker, который использует 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>

все, кажется, работает отлично, за исключением самой важной части, привязки данных. Обновление Угловой версии до 1.5.0 устраняет проблему в POC. Но, как уже упоминалось, это не вариант в моем случае.

Это ошибка? Является ли устаревшая документация устаревшей? Есть ли какое-то обходное решение, помимо обновления Angular? Или я просто что-то пропустил?

источник

2016-02-08 M. Jonckers

Что вы пытались уже? Вы отлаживали директиву Froala? –

Я пробовал несколько угловых версий и заметил, что та же проблема возникла до углового 1.2.29 Переплет начинает работать с Angular 1.3.0 –

Существует проблема с этой версией Angular при попытке использовать ngModel в директиве.

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

Когда директива ngModel используется на элемент, который представляет собой компонент (реализованный с помощью директивы с изолята сферы), ngModel заблокирован в этом изолировать рамки и для того, чтобы выйти и сделать ngModel полезно выражение ngModel должно иметь префикс $ parent.

Как было предложено в этой статье, я попытался использовать префикс $ parent и мог заметить одностороннее обнаружение привязки данных.

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

Чтобы получить мою модель, которая будет обновлена, я должен был назвать $ применить() в froala-директива, которая заставляет $ дайджеста().

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

Я обновил свой POC на плункере для тех, кто хочет, чтобы он работал.

источник

2016-02-10 10:19:33

Можете ли вы, пожалуйста, отредактировать свой плункер, чтобы рассказать мне, как добавить еще несколько опций в панель инструментов в froala? последовали его документации, но это не сработает. Я пытался добавить к нему еще * toolbarButtons *, например 'align, formatOL, formatUL', включив их плагины. Все еще не сработало. [ссылка на панели инструментов] (https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtons) –

Я знаю, что этот пост старый, но для тех, кто ищет решение, я исправил проблему путем перехода от:

<textarea froala="froalaOptions" ng-model="myHtml"></textarea>

к этому:

<textarea froala="froalaOptions" ng-model="$parent.myHtml"></textarea>

источник

2016-11-07 14:52:56 ClaytonAlanKinder

angular-froala 2.1.0 привязка данных не работает с угловым 1.1.5

ответ

Смежные вопросы