कोणीय से jquery संवाद खोलने के लिए सबसे अच्छा अभ्यास क्या है?

Question

यहाँ एचटीएमएल:

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 है? ऐसा लगता है कि डोम तक पहुंचने के बिना इसे खोलने का एक बेहतर तरीका हो सकता है लेकिन मुझे यकीन नहीं है कि मैं इसके बारे में कैसे जाऊंगा। उपर्युक्त कोड काम करता है, मैं बस सोच रहा हूं कि ऐसा करने के बारे में मुझे क्या करना चाहिए। कोई इनपुट स्वागत है।

Answer 1

"सर्वश्रेष्ठ अभ्यास" यहां अस्पष्ट मैदान है। यदि यह पठनीय है और यह काम करता है, तो आप वहां 9 0% हैं, आईएमओ, और यह शायद ठीक है।

उस ने कहा, "कोणीय तरीका" नियंत्रक से डीओएम हेरफेर को रखना है, और यह सुनिश्चित करने के लिए निर्भरता इंजेक्शन का उपयोग करना है कि सब कुछ टेस्ट करने योग्य है। स्पष्ट रूप से जिस तरह से आपने ऊपर दिखाया है, उसे जांचना मुश्किल होगा, और नियंत्रक में कुछ डीओएम हेरफेर डालता है।

मुझे लगता है मैं नियंत्रक से बाहर डोम हेरफेर प्राप्त करने के लिए एक निर्देश का उपयोग कर रहा है क्या करेंगे:

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

किसी भी तरह। मुझे उम्मीद है कि यह सब आपको यह तय करने में मदद करेगा कि आप किस मार्ग को लेना चाहते हैं। ऐसा करने के लिए हजारों तरीके हैं। "सही" तरीका जो भी काम करता है, आपको जो भी करने की ज़रूरत है (परीक्षण या कुछ और) करने की अनुमति देता है, और इसे बनाए रखना आसान है।