AngularJS & Redactor插件

Question

所以我在AngularJS的一个新网站上工作，我喜欢它！

然而，我遇到了一个问题。我正在尝试添加一个叫做'Redactor‘的jQuery插件到我的文本区域中，但是我想当我初始化这个插件的时候，它会替换掉文本区域元素。这是有问题的，因为我已经为文本区域设置了一个'ng-model‘属性，如下所示：

​

我使用AngularJS UI拾取焦点事件，然后对文本的焦点执行以下代码

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

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

有没有办法在受Redactor影响后将ng-model属性绑定到textarea？否则，有没有其他方法可以让我得到文本区域的值？

Answer 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，所以如果有更好的方法，或者我是否打破了一些我仍然不知道的惯例，请告诉我。

Answer 2

对于那些发现被接受的答案不像我这样工作的人。这是工作版本(使用Angular v1.1.5)

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

                        changeCallback: function() {
                            $scope.$apply(controller.$setViewValue(elem.val()));
                        }

                    });

                };
            }
        };
    });

changeCallback比其他回调加在一起要好得多，在我的例子中，我必须将元素转换为Jquery元素。我还发现setCode和getCode根本不可用。它可能是一个不同的版本。

Answer 3

对“RedactorJS”使用这个AngularJS模块：https://github.com/TylerGarlick/angular-redactor

它对我来说工作得很好。