web-dev-qa-db-ja.com

Angularからjqueryダイアログを開くためのベストプラクティスは何ですか？

Htmlはここにあります：

<div ng-controller="MyCtrl">
    <a ng-click="open()">Open Dialog</a>
    <div id="modal-to-open" title="My Title" ui-jq="dialog" ui-options="{width: 350, autoOpen: false, modal: true}">
        Dialog Text
    </div>
</div>

そしてここにjsがあります：

function MyCtrl($scope) 
{
    $scope.open = function () {
        $('#modal-to-open').dialog('open');
    }
}

これはこれを行うための最善の方法ですか？ DOMにアクセスせずにそれを開くより良い方法があるように思われますが、どうすればよいかわかりません。上記のコードは機能しますが、これが私がこれを実行する方法になるかどうか疑問に思っています。どんな入力でも大歓迎です。

jquery-uijquery-ui-dialogangularjs
29
testing123

「ベストプラクティス」は、ここではあいまいです。読み取り可能で機能している場合、IMOは90％であり、おそらく問題ありません。

そうは言っても、「角度のある方法」は、DOM操作をコントローラーから遠ざけ、依存性注入を使用してすべてがテスト可能であることを確認することです。明らかに、上記の方法ではテストが難しく、コントローラーにDOM操作が含まれています。

コントローラからDOM操作を取得するために私がすることは、ディレクティブを使用することだと思います：

ダイアログのオープン呼び出しを要素のクリックに結び付ける簡単なディレクティブ：

app.directive('openDialog', function(){
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
            var dialogId = '#' + attr.openDialog;
            elem.bind('click', function(e) {
                $(dialogId).dialog('open');
            });
        }
    };
});

そしてマークアップでは次のように使用されます：

<button open-dialog="modal-to-open">Open Dialog</button>

さて、これは明らかに非常に基本的です。必要に応じて、ダイアログのさまざまなオプションに追加の属性を追加して、これでかなり高度になることができます。

さらに進んで、ダイアログを開くサービスを追加して、それをコントローラーまたはディレクティブに注入して、そこから呼び出しを取得することができます。例えば：

app.factory('dialogService', [function() {
    return {
        open: function(elementId) {
            $(elementId).dialog('open');
        }
    };
}]);

そしてここではそれが使用されています。それは本質的に同じことなので、ばかげているように見えます。しかし、それは非常に単純な例であるためです。しかし、それは少なくともDIを活用し、テスト可能です。

app.controller('MyCtrl', function($scope, dialogService) {
    $scope.open = function () {
        dialogService.open('#modal-to-open');
    };
});

とにかく。以上のことを参考にして、どのような道を進みたいかを判断してください。これを行う方法は千通りあります。 「正しい」方法は何でも機能し、必要なこと（テストなど）を行うことができ、保守も簡単です。

64
Ben Lesh