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

Question

을 heres HTML :

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

이이 일에 대해 갈 수있는 가장 좋은 방법입니다 : 여기

<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입니까? DOM에 액세스하지 않고도 열 수있는 더 좋은 방법이있는 것 같지만 어떻게해야 될지 모르겠습니다. 위의 코드가 작동합니다.이 작업을 수행해야하는 방식인지 궁금합니다. 모든 입력을 환영합니다.

Answer 1

"모범 사례"는 여기 퍼지입니다. 읽을 수 있고 제대로 작동한다면 90 %가 IMO이고 괜찮을 것입니다.

말하자면, "각도 방식"은 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'); 
      }); 
     } 
    }; 
}); 

: 요소에 클릭에 대화 공모를 묶어

간단한 지침 :

나는 내가 지시어를 사용하는 컨트롤러의 밖으로 DOM 조작을 얻기 위해 무엇을 할 것이라고 추측

그리고는 마크에서 그렇게 같이 사용됩니다 :

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

아무튼. 그 모두가 당신이 원하는 경로를 결정하는 데 도움이되기를 바랍니다. 이를 수행하는 데는 수천 가지 방법이 있습니다. "올바른"방법은 무엇이든지 작동하며, 수행해야하는 모든 작업 (테스트 또는 다른 작업)을 수행 할 수 있으며 유지하기 쉽습니다.