Quelle est la meilleure pratique pour ouvrir une boîte de dialogue jquery à partir d'angular?
Voici le code 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 faire cela? Il semble qu'il pourrait y avoir une meilleure façon de l'ouvrir sans accéder au DOM, mais je ne suis pas sûr de savoir comment je ferais à ce sujet. Le code ci-dessus fonctionne, je me demande simplement si c'est la façon dont je devrais faire cela. Toute entrée est la bienvenue.
1 réponses
La"meilleure pratique" est floue ici. Si c'est lisible et que cela fonctionne, alors vous êtes à 90%, IMO, et c'est probablement bien.
Cela dit, la "manière angulaire" est de garder la manipulation DOM hors du contrôleur, et d'utiliser l'injection de dépendance pour s'assurer que tout est testable. Évidemment, la façon dont vous 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 un 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 ceci:
<button open-dialog="modal-to-open">Open Dialog</button>
Maintenant, c'est évidemment très basique. Vous pourriez être 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, de sorte que vous pouvez l'injecter dans votre contrôleur ou même votre directive, et obtenir le appel à sortir de cette façon. Par exemple:
app.factory('dialogService', [function() {
return {
open: function(elementId) {
$(elementId).dialog('open');
}
};
}]);
Et ici, il est en cours d'utilisation. Cela semble stupide parce que c'est essentiellement la même chose. Mais c'est surtout parce que c'est un exemple très simpliste. Mais il tire au moins parti de 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 que vous voulez prendre. Il existe mille et une façons de le faire. La "bonne" façon est tout ce qui fonctionne, vous permet de faire ce que vous devez faire (test ou toute autre chose), et est facile à maintenir.