jquery-ui - kendo - angular ui

¿Cuál es la mejor práctica para abrir un diálogo de jquery desde angular?

Question

Aquí está el 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>

Y aquí está el js:

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

¿Es esta la mejor manera de hacer esto? Parece que podría haber una mejor manera de abrirlo sin acceder al DOM, pero no estoy seguro de cómo hacerlo. El código anterior funciona, solo me pregunto si este es el camino que debería seguir para hacer esto. Cualquier entrada es bienvenida.

Answer 1

La "mejor práctica" es terreno difuso aquí. Si es legible y funciona, entonces estás 90% allí, IMO, y probablemente esté bien.

Dicho esto, la "forma angular" es mantener la manipulación del DOM fuera del controlador y usar la inyección de dependencia para asegurarse de que todo sea comprobable. Obviamente, la forma en que ilustraste anteriormente sería difícil de probar y pone algo de manipulación DOM en el controlador.

Creo que lo que haría para sacar la manipulación DOM del controlador es usar una directiva:

Una directiva simple para vincular su diálogo llamada abierta a un clic en un elemento:

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

Y en mark up se usaría así:

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

Ahora, esto es obviamente muy básico. Podrías hacerte bastante avanzado con esto si quisieras, agregando atributos adicionales para diferentes opciones en el diálogo.

Podrías ir más allá y agregar un Servicio que abriera el diálogo por ti, para que pudieras inyectarlo en tu controlador o incluso en tu directiva, y recibir la llamada de esa manera. Por ejemplo:

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

Y aquí está en uso. Parece tonto porque es esencialmente lo mismo. Pero eso es principalmente porque es un ejemplo muy simplista. Pero al menos aprovecha DI y es comprobable.

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

De todos modos. Espero que todo eso te ayude a decidir qué camino deseas tomar. Hay mil maneras de hacer esto. La forma "correcta" es la que funciona, le permite hacer lo que necesite (pruebas o cualquier otra cosa) y es fácil de mantener.