angular-froala 2.1.0 数据绑定不适用于 angular 1.1.5

Question

我目前正在使用 Angular 1.1.5 开发一个项目。升级 Angular 目前不是一个选项。

我们想实现一个丰富的 HTML5 所见即所得编辑器，并决定尝试 Froala，因为它符合我们的要求，angular-froala 的 docs 声明它应该适用于所有版本的 Angular >=1.0 .

我在 Plunker 上做了一个 POC，它使用 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>

除了最重要的部分，数据绑定之外，一切似乎都运行良好。将 Angular 版本升级到 1.5.0 修复了 POC 中的问题。但如前所述，这不是我的选择。

这是一个错误吗？ froala-angular 的文档是否过时？除了升级 Angular 之外还有什么解决方法吗？或者我只是在这里遗漏了什么？

Answer 1

尝试在指令中使用 ngModel 时，此版本的 Angular 似乎存在问题。

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.

按照此线程中的建议，我尝试使用 $parent 前缀，并且可以注意到一种方式的数据绑定查找位置。

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

为了更新我的模型，我不得不在 froala 指令中调用 $apply()，这会强制执行 $digest()。

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

我在 plunker 上更新了我的 POC，以供那些想要查看的人使用运行。

Answer 2

我知道这个 post 是旧的，但对于任何寻求解决方案的人，我通过更改以下内容来解决问题：

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

对此：

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

angular-froala 2.1.0 数据绑定不适用于 angular 1.1.5

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

angularjs

froala