web-dev-qa-db-fra.com

Quelle est la meilleure pratique pour ouvrir une boîte de dialogue jquery depuis angular?

Voici le 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>

Et voici le js:

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

Est-ce la meilleure façon de procéder? Il semble qu'il pourrait y avoir une meilleure façon de l'ouvrir sans accéder au DOM, mais je ne sais pas comment je procéderais. Le code ci-dessus fonctionne, je me demande simplement si c'est la façon dont je dois procéder. Toute contribution est la bienvenue.

jquery-uijquery-ui-dialogangularjs
29
testing123

La "meilleure pratique" est ici un terrain flou. Si c'est lisible et que cela fonctionne, alors vous êtes à 90% là-bas, OMI, et c'est probablement bien.

Cela dit, la "voie angulaire" consiste à empêcher la manipulation DOM du contrôleur et à utiliser l'injection de dépendance pour s'assurer que tout est testable. De toute évidence, la façon dont vous l'avez illustré ci-dessus serait difficile à tester et met une certaine manipulation DOM dans le contrôleur.

Je suppose que ce que je ferais pour obtenir la manipulation DOM du contrôleur est d'utiliser une directive:

Une directive simple pour lier votre appel d'ouverture de dialogue à un clic sur un élément:

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

Et dans le balisage, il serait utilisé comme suit:

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

Maintenant, c'est évidemment très basique. Vous pouvez devenir assez avancé avec cela si vous le souhaitez, en ajoutant des attributs supplémentaires pour différentes options dans la boîte de dialogue.

Vous pouvez aller encore plus loin et ajouter un service qui a ouvert la boîte de dialogue pour vous, afin que vous puissiez l'injecter dans votre contrôleur ou même votre directive, et obtenir l'appel de cette façon. Par exemple:

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

Et ici, il est utilisé. Cela semble idiot parce que c'est essentiellement la même chose. Mais c'est principalement parce que c'est un exemple très simpliste. Mais il exploite au moins DI et est testable.

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

De toute façon. J'espère que tout cela vous aidera à décider quel chemin vous voulez prendre. Il y a mille façons de procéder. La "bonne" manière est ce qui fonctionne, vous permet de faire tout ce que vous devez faire (test ou autre) et est facile à entretenir.

64
Ben Lesh