2

だから私はAngularJSの新しいサイトに取り組んでいて、それが大好きです！

しかし、問題が発生しました。'Redactor'というjQueryプラグインをtextareasに追加しようとしていますが、プラグインを初期化すると、textarea要素が置き換えられると思います。これが問題になる理由は、次のように、テキスト領域に「ng-model」属性を設定したためです。

AngularJS UIを使用してフォーカスイベントを取得し、テキストのフォーカス時に次のコードを実行しています

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

ng-model'response'にアクセスしようとすると、未定義として表示されるため、textareaの値を取得できないようです。

Redactorの影響を受けた後、ng-model属性をtextareaにバインドする方法はありますか？それ以外の場合、textareaの値を取得する別の方法はありますか？

4

3 に答える 3

9

私は今日同じ答えを探していて、それを解決するための指示を出しました：

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を使い始めたばかりなので、これを行うためのより良い方法があるかどうか、または私がまだ気付いていないいくつかの規則を破った場合はお知らせください。

于 2013-04-28T15:15:10.287 に答える
7

受け入れられた答えが私のように機能していないと思う人のために。これは動作しているものです（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がまったく利用できないこともわかりました。別のバージョンかもしれません。

于 2013-07-30T04:40:58.903 に答える
4

「RedactorJS」には次のAngularJSモジュールを使用してください： https ：//github.com/TylerGarlick/angular-redactor

それは私にとってはうまくいきました。

于 2013-12-11T12:19:20.733 に答える