각도에서 jquery 대화상자를 여는 가장 좋은 방법은 무엇입니까?

각도에서 jquery 대화상자를 여는 가장 좋은 방법은 무엇입니까?

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에 접속하지 않고 여는 방법이 있을 것 같습니다만, 어떻게 하면 좋을지 모르겠습니다.위의 코드는 유효합니다.이렇게 하는 것이 좋은지 궁금할 뿐입니다.어떤 입력도 환영합니다.

"베스트 프랙티스"는 여기서 애매모호합니다.읽을 수 있고 작동한다면 90%가 거기 있고, IMO, 그리고 아마 괜찮을 거야.

즉, "각선 방식"은 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');
    };
});

아무튼 이 모든 것이 여러분이 어떤 길을 가고 싶은지 결정하는데 도움이 되었으면 좋겠습니다.이것을 하는 방법은 천 가지가 있다."올바른" 방법은 무엇이든지 작동하며 필요한 모든 작업(테스트 또는 기타 작업)을 수행할 수 있으며 유지보수가 쉽습니다.

언급URL : https://stackoverflow.com/questions/12967434/what-is-the-best-practice-for-opening-a-jquery-dialog-from-angular