1

Overflow: hidden テキストに省略記号を追加する AngularJS ディレクティブを作成しました。Firefox では動作しないようです。また、可能な限り適切に構成したとは思えません。フローは次のとおりです。

  1. HTML 要素にディレクティブ属性を追加する
  2. ディレクティブは ng-bind 属性をスコープに読み込みます
  3. リンク関数の ng-bind への変更を監視するディレクティブ
  4. ng-bind の変更では、ディレクティブは、テキストを分割して省略記号を追加する場所を決定するために、いくつかの凝った計算を行います (このコードはここには含めていません。動作すると仮定してください)。
  5. ディレクティブは要素の HTML をこの新しい文字列に等しく設定し、ng-bind には触れません

HTML

<p data-ng-bind="articleText" data-add-ellipsis></p>

指令

app.directive('addEllipsis', function(){
    return {
        restrict    : 'A',
        scope       : {
            ngBind    : '='  // Full-length original string
        },
        link        : function(scope, element, attrs){
            var newValue;

            scope.$watch('ngBind', function () {
                /*
                 *  CODE REMOVED - Build shortened string and set to: newText
                 */

                 element.html(newText);  // - Does not work in Firefox and is probably not best practice
            });
        }
    };
});

問題の行は、ディレクティブの最後の行です。

 element.html(newText)

テンプレートスタイルのアプローチを使用する必要があると思いますか? 答えに最も近づく方法がわかりません。助けてくれてありがとう。

4

2 に答える 2

0

に置き換えるdata-ng-bind="articleText"とng-model="articleText"、Chrome と Firefox の両方で動作するはずです。原因がわからないのですが、バグでしょうか？しかし、それは迅速な修正です。

違いに興味がある場合は、この投稿をご覧ください。しかし、ブラウザごとに異なる動作は確かに少し奇妙です。

于 2013-07-31T21:19:31.257 に答える