1

私が取り組んでいるプロジェクトのリッチ テキスト ソリューションとしてtextangularを使用しています。

特定の html タグのみを許可するため、この入力をサニタイズする必要があります。

これは textangular のデフォルトの可能性ではないため、textangular ディレクティブをラップするディレクティブを作成しました。入力テキストを正常にサニタイズできますが、ビューは更新されず、これを達成する方法のアイデアが不足しています

指令：

.directive('chTextAngular',  function(){

    return {
      restrict: 'E',
      require: 'ngModel',
      template: function(elements, attributes) {
        return '<div text-angular ng-model="' + attributes.ngModel + '" id="' + attributes.id + '"></div>';
      },
      link: function(scope, element, attributes, ngModel) {
        scope.$watch(attributes.ngModel, function(n, o) {
          if(n !== undefined) {

            // Replace all the divs with <br> tags
            var sanitized = ngModel.$viewValue.replace(/<div>/gm, '<br>').replace(/<\/div>/gm, ' ');
            sanitized = sanitized.replace(/<p>/gm, '').replace(/<\/p>/gm, '<br><br>');

            sanitized = $.htmlClean(sanitized, {
              allowedTags: ["strong", "em", "ul", "ol", "li", "a", "b", "i", "br"],
              allowedAttributes: ["a", "href"]
            });

            console.log(sanitized);

            ngModel.$setViewValue(sanitized);

          }
        });
      }
    }
});

ログにモデルが出力され、実際に変更されていることが示されます。textangular で実際のテキストエリアを更新する方法がわかりません。

誰かがこれを手伝ってくれますか、それとも正しい方向に向けてくれますか?

4

1 に答える 1

1

わかりました、最初の質問は次のとおりです。ビューを更新する必要が本当にあるのか、それともモデルが正しいデータであればそのままでよいのか。

ngModel.$parsers.push(function(n,o){...})第二に、余分なウォッチャーを避けるために、おそらく関数を登録する必要があります。

更新されない理由は、誰かが入力している間にモデルがビューを更新するのを防ぐために、textAngular にキャッチがあるためです。フィールドがフォーカスされているときにこれを行うと、カーソルがテキスト フィールドの開始/終了に戻るという問題が発生します。モデルからビューを更新したい場合は、blur イベント ハンドラー ( ) を登録し、ディレクティブがアタッチするスコープに応じてelement.on('blur', ...);呼び出しが機能する場合があります。scope.updateTaBindtaTextElement()その関数が機能しない場合は、 name 属性を textAngular 要素に追加してからtextAngularManager.refreshEditor(name);関数を使用する必要があります。

于 2014-09-21T23:00:30.323 に答える