2

私は AngularJS の初心者です。

jQuery JScrollPane (JScrollpane.kelvinluck.com) を div に適用するカスタム ディレクティブを作成しようとしています。

私は次のhtmlコードを持っています:

<scrollPane> ------> WRONG
<div scroll-pane> -----> RIGHT
    <ul>
        <li data-ng-repeat="task in tasks">
            <div class="task-element">
                <div class="name">{{task.display_name}}</div>
                <div class="text">{{task.min_description}}</div>
            </div>
        </li>
    </ul>
</scrollPane>

および次のディレクティブ:

angular.module('myApp', []).directive('scrollPane',function() {
return {
    restrict:'A',
    template: '<div></div>',
    link: function (scope, elm, attrs) {
    console.log("in directive");
    element.addClass('scroll-pane');
    element.jScrollPane({showArrows: true,autoReinitialise:true });
}};
});

主な問題は、テンプレートの html が<scrollPane>要素全体を上書きし、ng-repeat<li>がまったく表示されず、最終的な html から削除されることです。

内側の html を html でラップするディレクティブを作成する正しい方法は何ですか (私の例では div とclass='scroll-pane' )になります。どこに : を挿入する必要があり $('.scroll-pane').jScrollPane();ますか?

ヘルパーに感謝します。

更新: 上記のコードが機能しないことが判明しました。問題は HTML にありました。これは、ディレクティブで restrict:"A" を使用する必要があるためです。( http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/のヒントに感謝)

jScrollPaneを適用するには、ディレクティブ内で使用しました

element.jScrollPane({showArrows: true,autoReinitialise:true });

すべてがうまくいきましたが、1つの問題が開いています.cssの回避策として、ng-repeatでタスクの長さを取得して、divの固定高さを設定する必要があります。デバッグ中に、まだレンダリングされていないことがわかりました。どうすれば、ng-repeat がデータを取得するまで待つことができますか? （サービスを使用）。

4

2 に答える 2