29

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 にアクセスせずに開くより良い方法があるようですが、どうすればよいかわかりません。上記のコードは機能しますが、これが私がこれを行うべき方法であるかどうか疑問に思っています。任意の入力を歓迎します。

4

1 に答える 1

64

ここでの「ベストプラクティス」はあいまいな地面です。読み取り可能で動作する場合は、90% はそこにあり、IMO であり、おそらく問題ありません。

つまり、「角度のある方法」とは、DOM 操作をコントローラーから除外し、依存性注入を使用してすべてがテスト可能であることを確認することです。明らかに、上で説明した方法はテストが難しく、DOM 操作をコントローラーに入れます。

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

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

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');
    };
});

とにかく。これらすべてが、あなたが進みたい道を決めるのに役立つことを願っています。これを行うには何千もの方法があります。「正しい」方法とは、何をしてもうまくいき、必要なこと (テストやその他のこと) を実行でき、保守が容易な方法です。

于 2012-10-19T12:58:28.443 に答える