Question

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

我们希望实现一个丰富的HTML5 WYSIWYG编辑器，并指示给Froala一个尝试，因为它符合我们的要求和角度 - froala状态docs它应该适用于所有版本的Angular＆gt; = 1.0。

我在Plunker上使用Angular 1.1.5进行了POC。

<!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

当ngModel指令用于表示组件的元素（通过具有隔离范围的指令实现）时，ngModel被锁定到此隔离范围中，为了使ngModel表达式必须以ngModel为前缀并使ngModel有用。 $父。

正如在这个线程中所建议的那样，我尝试使用$ parent前缀，并且可以注意到一种数据绑定查找方式。

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

为了让我的模型得到更新，我不得不在froala-directive中调用$ 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

我知道这篇文章已经过时了，但是对于寻找解决方案的人来说，我通过改变来解决了这个问题：

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

到此：

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

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

2 个答案: