AngularJS＆安培;主编插件 [英] AngularJS & Redactor Plugin

问题描述

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

So I am working on a new site in AngularJS, and loving it!

我也不过遇到了问题。
我想添加一个jQuery插件称为主编我的文字区域，但我认为正在发生的事情是，当我初始化插件，它取代了textarea元素。究其原因，这是有问题的，是因为我设置了'NG-模式属性的文本区域，像这样：

I have encountered a problem, however. I am trying to add a jQuery plugin called 'Redactor' to my textareas, but I think what is happening is when I initialise the plugin, it replaces the textarea element. The reason this is problematic, is because I have set an 'ng-model' attribute to the text area, like so:

我使用AngularJS UI皮卡的焦点事件，然后在文本的焦点执行以下code

I am using AngularJS UI to pickup the focus event, and then execute the following code upon focus of the text

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

现在我似乎无法得到textarea的价值，因为当我尝试访问NG-模式反应，它出现的不确定的。

Now I can't seem to get the value of the textarea, because when I try and access the ng-model 'response', it comes up as undefined.

有后一直受主编，我可以绑定一个NG-模型属性的textarea的一种方式？否则，有另一种方式我应该得到textarea的价值？

Is there a way I can bind an ng-model attribute to the textarea AFTER it has been affected by Redactor? Else, is there another way I should be getting the textarea's value?

推荐答案

我今天找了相同的答案，并提出了指导解决这个问题：

I was looking for the same answer today and made a directive to solve it:

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：

Then you can just use the following HTML:

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

该模型将在每个KEYUP更新，当用户点击工具栏上的按钮。该模型将包含HTML code。

The model will be updated on each keyUp and whenever the user clicks on a button in the toolbar. The model will contain the HTML code.

我刚开始用AngularJS所以请让我知道，如果有更好的方法来做到这一点，或者我打破了某些约定，我仍然不知道。

I have just started out with AngularJS so please let me know if there are better ways to do this or if I broke some conventions I am still unaware of.

这篇关于AngularJS＆安培;主编插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！