文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >角-froala 2.1.0数据绑定不使用角1.1.5

问角-froala 2.1.0数据绑定不使用角1.1.5
EN

Stack Overflow用户
提问于 2016-02-08 10:59:39
回答 2查看 1.6K关注 0票数 1

我目前正在进行一个使用角1.1.5的项目。升级角度目前还不是一个选项。

我们希望实现一个丰富的HTML5 WYSIWYG编辑器，并尝试给Froala一个尝试，因为它符合我们的要求和文档的角-弗罗拉状态，它应该与所有版本的角>=1.0。

我在柱塞上做了一个POC，它使用的是角1.1.5。

代码语言：javascript
复制
<!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中的问题。但如前所述，在我的情况下，这不是一种选择。

这是个虫子吗？弗罗拉角的文档过时了吗？除了提升角度之外，还有什么解决办法吗？还是我只是在这里遗漏了什么？

angularjs
froala
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-02-10 10:19:33

当试图在指令中使用ngModel时，这个版本的Angular似乎存在问题。

https://github.com/angular/angular.js/issues/1924 当在表示组件的元素(通过带有隔离作用域的指令实现)上使用ngModel指令时，ngModel被锁定在这个隔离作用域中，为了使ngModel有用，ngModel表达式必须以$parent作为前缀。

正如在这个线程中所建议的，我尝试使用$parent前缀，并且可以注意到单向数据绑定查找位置。

代码语言：javascript
复制
<textarea id="froala-sample-2" froala ng-model="$parent.sample2Text"></textarea>

为了更新我的模型，我必须在$apply指令中调用$digest()，该指令强制执行一个$digest()。

代码语言：javascript
复制
ctrl.updateModelView = function () {
    var returnedHtml = element.froalaEditor('html.get');
    if (angular.isString(returnedHtml)) {
        scope.$apply(function() {
            ngModel.$setViewValue(returnedHtml);
        })
    }
};

我更新了我的POC的柱塞谁想看到它运行。

票数 1
EN

Stack Overflow用户

发布于 2016-11-07 14:52:56

我知道这篇文章很旧，但是对于任何想要找到解决办法的人，我通过从以下几个方面修改来解决这个问题：

代码语言：javascript
复制
<textarea froala="froalaOptions" ng-model="myHtml"></textarea>

对此：

代码语言：javascript
复制
<textarea froala="froalaOptions" ng-model="$parent.myHtml"></textarea>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/35267998

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档