AngularJS和Redactor插件

一尘不染

AngularJS和Redactor插件

angularjs

因此，我正在AngularJS中创建一个新站点，并且对此非常喜欢！

但是，我遇到了一个问题。我试图在我的textareas中添加一个名为“
Redactor”的jQuery插件，但是我认为正在发生的事情是，当我初始化该插件时，它将替换textarea元素。之所以有问题，是因为我为文本区域设置了“
ng-model”属性，如下所示：

我正在使用AngularJS UI拾取焦点事件，然后在文本聚焦时执行以下代码

    $scope.addRedactor = function() {
        $('.redactor').redactor();
    });

现在，我似乎无法获得textarea的值，因为当我尝试访问ng-model’response’时，它显示为未定义。

在受到Redactor影响后，有什么方法可以将ng-model属性绑定到textarea吗？否则，还有其他方法可以让我获得textarea的价值吗？

阅读 212

2020-07-04

共1个答案

一尘不染

我今天一直在寻找相同的答案，并提出了解决该问题的指令：

angular.module('Module', []).directive("redactor", function() {
  return {
    require: '?ngModel',
    link: function($scope, elem, attrs, controller) {

      controller.$render = function() {

        elem.redactor({
          keyupCallback: function() {
            $scope.$apply(controller.$setViewValue(elem.getCode()));
          },
          execCommandCallback: function() {
            $scope.$apply(controller.$setViewValue(elem.getCode()));
          }
        });

        elem.setCode(controller.$viewValue);
      };
    }
  };
});

然后，您可以使用以下HTML：

<textarea ng-model="yourModel" redactor></textarea>

每当用户单击工具栏上的按钮时，模型将在每个keyUp上更新。该模型将包含HTML代码。

我刚开始使用AngularJS，所以请让我知道是否有更好的方法来执行此操作，或者是否打破了一些我仍然不知道的约定。

2020-07-04