AngularJS和Redactor插件

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根本不可用.可能是不同的版本.