Cách thực hành tốt nhất để mở hộp thoại jquery từ góc cạnh là gì?

Question

Heres 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> 

Và đây là js:

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

Đây có phải là cách tốt nhất để đi về việc này? Nó có vẻ như có thể là một cách tốt hơn để mở nó mà không truy cập vào DOM nhưng tôi không chắc chắn làm thế nào tôi sẽ đi về điều đó. Các mã trên hoạt động, tôi chỉ tự hỏi nếu đây là cách tôi nên đi về việc này. Bất kỳ đầu vào được chào đón.

Answer 1

"Phương pháp hay nhất" là nền mờ ở đây. Nếu nó có thể đọc được và nó hoạt động, thì bạn có 90% ở đó, IMO, và nó có lẽ là tốt.

Điều đó nói rằng, "góc cạnh" là giữ cho thao tác DOM ra khỏi bộ điều khiển và sử dụng tính năng tiêm phụ thuộc để đảm bảo mọi thứ đều có thể kiểm chứng. Rõ ràng cách bạn minh họa ở trên sẽ khó kiểm tra và đặt một số thao tác DOM trong bộ điều khiển.

Tôi đoán những gì tôi sẽ làm gì để có được những thao tác DOM ra của bộ điều khiển được sử dụng một chỉ thị:

Một chỉ đơn giản để buộc cuộc gọi mở hộp thoại của bạn để một nhấp chuột vào một yếu tố:

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

Và trong đánh dấu nó sẽ được sử dụng như vậy:

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

Bây giờ, điều này rõ ràng là rất cơ bản. Bạn có thể nhận được khá tiên tiến với điều này nếu bạn muốn, thêm các thuộc tính bổ sung cho các tùy chọn khác nhau trong hộp thoại.

Bạn có thể tiến xa hơn và thêm Dịch vụ đã mở hộp thoại cho bạn, vì vậy bạn có thể đưa nó vào bộ điều khiển hoặc thậm chí chỉ thị của bạn và nhận cuộc gọi ra khỏi đó theo cách đó. Ví dụ:

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

Và tại đây nó đang được sử dụng. Nó có vẻ ngớ ngẩn vì nó về cơ bản là giống nhau. Nhưng đó chủ yếu là vì nó là một ví dụ rất đơn giản. Nhưng nó ít nhất là đòn bẩy DI và có thể kiểm chứng được.

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

Nhưng dù sao đi nữa. Tôi hy vọng tất cả điều đó sẽ giúp bạn quyết định con đường bạn muốn thực hiện. Có hàng nghìn cách để làm điều này. Cách "đúng" là bất kỳ công trình nào, cho phép bạn làm bất cứ điều gì bạn cần làm (kiểm tra hoặc bất kỳ thứ gì khác), và dễ bảo trì.