Какова наилучшая практика открытия диалога jquery из angular?

Вот этот 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, но я не уверен, как бы я это сделал. Вышеприведенный код работает, мне просто интересно, так ли я должен это делать. Любой вход приветствуется.

Ответы

Ответ 1

"Лучшая практика" здесь нечеткая. Если он читается и работает, то вы на 90% там, ИМО, и это, вероятно, прекрасно.

Тем не менее, "способ angular" должен содержать 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');
    };
});

Так или иначе. Я надеюсь, что все это поможет вам решить, какой путь вы хотите предпринять. Есть тысячи способов сделать это. "Правильный" способ - это то, что работает, позволяет делать все, что вам нужно (тестирование или что-то еще), и его легко поддерживать.