Question

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

然而，我遇到了一个问题。我试图在我的textareas中添加一个名为'Redactor'的jQuery插件，但我认为发生的事情是当我初始化插件时，它取代了textarea元素。这有问题的原因是因为我在文本区域设置了'ng-model'属性，如下所示：

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

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

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

有没有办法可以在受到Redactor影响后将ng-model属性绑定到textarea？另外，还有另一种方法可以获得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比其他回调组合要好得多，在我的情况下，我必须将elem转换为Jquery元素。我还发现setCode和getCode根本不可用。可能是不同的版本。

Answer 3

将此AngularJS模块用于“RedactorJS”： https://github.com/TylerGarlick/angular-redactor

它对我来说很好。

AngularJS＆amp; Redactor插件

3 个答案: