jquery - AngularJS コントローラーから jQuery を適切に呼び出す方法

Question

AngularJS で jQuery-UI タブを使用しようとしています。

こちらの例をご覧ください

問題はjQuery("#tabs").tabs();、コントローラーを呼び出すと、何かを「タブ化」するために必要なものの「半分」を接続しているように見えることです。

アイデア？

Answer 1

コントローラーで DOM 操作を行うべきではありません - まったく。むしろ、ディレクティブを使用する必要があります。

私は自分で使用する一連のディレクティブを開発しています: https://github.com/ganarajpr/Angular-UI-Components

哲学は、この単純なコードをディレクティブ ファイルにドロップすることです。

.directive('maketab',function() {
        return function(scope, elm, attrs) {
            elm.tabs({
                show: function(event, ui) {
                        scope.$broadcast("tabChanged",ui);
                }
            });
        };
    })

次に、タブに変換したい div で:

<div id="mytab" maketab>

<ul>
....
</ul>

<div>...</div>
...
</div>

div とその子構造は、JQuery UI が要求する内容に準拠する必要があることに注意してください。

より堅牢な例とその他のコンポーネントについては、github リポジトリを確認してください。