क्या कोणीय जेएस में नियंत्रक से निर्देशक बात करनी चाहिए?

Question

मैं वह एक उदाहरण के रूप में इस देता है जॉन Linquist द्वारा और एक वीडियो से संबंधित वीडियो देखने किया गया है:

var app = angular.module('twitterApp', []) 

app.controller("AppCtrl", function ($scope) { 
    $scope.loadMoreTweets = function() { 
     alert("Loading tweets!"); 
    } 
} 

app.directive("enter", function() { 
    return function (scope, element, attrs) { 
     element.bind("mouseenter", function() { 
     scope.LoadMoreTweets(); 
     }) 
    } 
} 

एक बात मैं के बारे में सोच रहा हूँ इस उदाहरण में निर्देश नियंत्रक करने के लिए वापस बात करनी चाहिए है या यह होगा एक सेवा बनाने के लिए बेहतर प्रोग्रामिंग अभ्यास बनें और उसके बाद निर्देश सेवा से बात करें? मुझे लगता है कि मुझे अभी भी यकीन नहीं है कि इस तरह से नियंत्रकों से बात करने के निर्देशों के लिए यह सामान्य प्रथा है।

U tube video

Answer 1

मैं इसे कैसे

<span enter="loadMoreTweets()">Something</span> 

किया होता जे एस

app.controller('AppController', function ($scope) { 
    $scope.loadMoreTweets = function() { 
     console.log("Loading tweets!"); 
    } 
}) 



app.directive("enter", function() { 
    return { 
    link: function (scope, element, attrs) { 
     element.bind("mouseenter", function() { 
      scope.$apply(attrs.enter) 
     }) 
    } 
    } 
}); 

डेमो: Plunker

एक और तरीका है एक ही

app.directive("enter", function() { 
    return { 
    scope: { 
     callback: '&enter' 
    }, 
    link: function (scope, element, attrs) { 
     element.bind("mouseenter", function() { 
      scope.$apply('callback()') 
     }) 
    } 
    } 
}); 

डेमो प्राप्त करने के लिए: 0,123,

Answer 2

यह आम बात है?

हां यह सामान्य प्रथा है, निर्देशों को अक्सर चर के लिए $ स्कोप तक पहुंचने और विधियों को कॉल करने की आवश्यकता होती है (जैसे LoadMoreTweets)।

भी official docs में वे की तरह उदाहरण है ..

scope.$watch(...) 

... एक निर्देश (जहां नियंत्रक देखा चर में परिवर्तन करने जा सकता है) के अंदर FOM।

यह इस तरह से नियंत्रक के साथ संवाद करने के निर्देश के लिए पूरी तरह उपयुक्त है।

आप निर्देश के link विधि में स्वयं नियंत्रक (न केवल दायरा) इंजेक्ट कर सकते हैं। http://docs.angularjs.org/guide/directive के "लिंकिंग फ़ंक्शन" अनुभाग को देखता है।

"नियंत्रक सभी निर्देशों के बीच साझा किया जाता है, जो निर्देशकों को संचार चैनल के रूप में नियंत्रकों का उपयोग करने की अनुमति देता है।"

लेकिन मैं एक सेवा का उपयोग कर सकता है?

निश्चित रूप से आप कर सकते हैं। सवाल यह है कि क्यों? यदि आप एक पृष्ठ के साथ काम कर रहे हैं (जो उदाहरण के लिए ट्वीट दिखाता है) और नियंत्रक के पास पहले से ही $scope.tweets वैरिएबल और $scope.loadMoreTweets विधि है, तो आप वहां पर एक सेवा छड़ी करने की कोशिश करते हैं, जहां आप इसकी आवश्यकता नहीं है, तो आप चीजों को अधिक जटिल बना रहे हैं।

दूसरी ओर सेवा आवेदन विस्तृत डेटा के लिए उपयोगकर्ता प्रोफ़ाइल की तरह परिपूर्ण है। यदि आपके निर्देश को वर्तमान में लॉग इन किए गए उपयोगकर्ता तक पहुंचने की आवश्यकता है, तो यह सेवा के माध्यम से ऐसा करने के लिए बहुत समझदारी है।

डॉक्स से:

कोणीय सेवाओं एकमात्र कि इस तरह के $ http सेवा ब्राउजर के XMLHttpRequest ऑब्जेक्ट के लिए निम्न स्तर पहुँच प्रदान करता है के रूप में वेब क्षुधा के लिए आम विशिष्ट कार्यों, बाहर ले जाने हैं।

यदि आपके पास एक एप्लिकेशन-व्यापी कार्य है जो सिंगलटन के लिए सबसे उपयुक्त है, तो हर तरह से एक सेवा का उपयोग करें। यदि आपको निर्देश से $ दायरे को एक्सेस/संशोधित करने की आवश्यकता है, तो बस नियंत्रक से सीधे बात करें, या उस ईवेंट को ट्रिगर करें जो नियंत्रक प्रतिक्रिया दे सकता है।

Answer 3

इस तरह के बाहरी दायरे के कार्यों को कॉल करना खतरनाक है, क्योंकि यह आसपास के दायरे के बारे में धारणा करता है।यदि एक अलग संदर्भ में निर्देश का उपयोग किया गया तो क्या होगा?

बेहतर [1] रणनीति है कि एक पुन: प्रयोज्य निर्देश के बाहर की दुनिया के साथ संवाद करने को रोजगार दे रही हैं:

• सेवाओं के लिए अपनी निर्भरता स्थगित। यह प्रणाली व्यापक सुविधाओं के लिए अधिक उपयुक्त है। मुझे लगता है कि यह आपके उदाहरण पर लागू नहीं होता है।
• एक अलग दायरे को परिभाषित करना जिसमें &attr संपत्ति है जो बाहरी दायरे से अभिव्यक्ति के लिए बाध्य है। निर्देश उस अभिव्यक्ति को अपने निजी दायरे के तरीके के रूप में बुला सकता है।

इस दूसरी रणनीति के उदाहरण के रूप में, मैंने आपका उदाहरण संशोधित कर दिया है। कार्रवाई में इसे यहाँ देखें http://plnkr.co/5uOBNu

var app = angular.module('twitterApp', []); 
app.controller("AppCtrl", function ($scope) { 
    $scope.loadMoreTweets = function() { 
     alert("Loading tweets!"); 
    }; 
}); 

app.directive("specialEnter", function() { 
    return { 
     scope: { 
      onEnter: '&' 
     }, 
     link: function(scope, element, attrs) { 
      element.bind("mouseenter", function() { 
       scope.onEnter(); 
      }); 
     } 
    }; 
}); 

<div ng-controller="AppCtrl"> 
    <div special-enter on-enter="loadMoreTweets()">Hover here!</div> 
</div> 

[1] "बेहतर" कठिन वायर्ड निर्भरता से बचने का एक अर्थ में।