AngularJS: निर्देश

से प्रसारित घटना मैंने देखा है लोगों को जहाँ भी अपने कोड में से यह कर रहा:AngularJS: निर्देश

$rootScope.$broadcast('someEvent', someParameter);

और फिर कुछ नियंत्रक में:

$rootScope.$on('someEvent', function(event, e){ /* implementation here */ });

अब, मैं चाहता हूँ broacast को निर्देश से एक घटना। क्या रूटस्स्कोप स्तर पर इसे प्रसारित करना अच्छा अभ्यास है? मैं इस घटना को नियंत्रक में संभालना चाहता हूं। क्या मैं $ स्कोप का उपयोग कर सकता हूं, या क्या मुझे अभी भी $ rootScope पर सुनना है?

स्रोत

2013-04-24 Sam

कि आप का उपयोग करने का निर्देश में गुंजाइश पृथक है लेख के अनुसार नियंत्रक –

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

मैं होता निर्देश नियंत्रक, जो HTML में निर्दिष्ट किया जाता है, जहां के निर्देश प्रयोग किया जाता है पर एक विधि कॉल:

एक निर्देश है कि एक अलग दायरे का उपयोग करता है के लिए:

<div my-dir ctrl-fn="someCtrlFn(arg1)"></div> 

app.directive('myDir', function() { 
    return { 
    scope: { ctrlFn: '&' }, 
    link: function(scope, element, attrs) { 
     ... 
     scope.ctrlFn({arg1: someValue}); 
    }

एक निर्देश है कि एक अलग दायरे का उपयोग नहीं करता के लिए:

<div my-dir ctrl-fn="someCtrlFn(arg1)"></div> 

app.directive('myDir', function($parse) { 
    return { 
    scope: true, // or no new scope -- i.e., remove this line 
    link: function(scope, element, attrs) { 
     var invoker = $parse(attrs.ctrlFn); 
     ... 
     invoker(scope, {arg1: someValue}); 
    }

स्रोत

2013-04-24 19:31:07

के नए संस्करण के लिए अपने जवाब को अपडेट कर सकते हैं। लेकिन मैं इवेंट प्रसारण का उपयोग करना चाहता था क्योंकि मैंने सोचा था कि यह बेहतर अभ्यास होगा। क्या यह इस मामले में नहीं है? $ emit और $ अच्छा ध्वनि पर :) – Sam

@ सैम, मुझे नहीं पता कि कौन सा बेहतर अभ्यास है। एक ईवेंट के परिणामस्वरूप आपके निर्देश और आपके नियंत्रक के बीच अधिक युग्मन होता है क्योंकि आपके नियंत्रक को एक विशिष्ट घटना सुननी होती है जिसे आपका निर्देश उत्सर्जित करेगा। मैं एक विधि का उपयोग करना पसंद करता हूं क्योंकि यह अधिक स्पष्ट/घोषणात्मक है कि निर्देश नियंत्रक के साथ संवाद करेगा, और मैं अपने एचटीएमएल में यह घोषणा कैसे कर सकता हूं। –

ठीक है, आपकी सलाह के लिए धन्यवाद! – Sam

आमतौर पर यह एक अच्छा विचार है कि $ rootScope का उपयोग वैश्विक नहीं है और आपको इसे तब तक प्रदूषित नहीं करना चाहिए जब तक आप वास्तव में नहीं जानते कि आप क्या कर रहे हैं। मैं अनुशंसा करता हूं कि आप this article about communication between services, directives and controllers पढ़ लें।

स्रोत

2013-04-24 18:42:00 joakimbl

का अभिभावक दायरा: "जब भी आपके पास कोई ऐसा ईवेंट होता है जो आपके आवेदन में होता है जो सभी नियंत्रकों और निर्देशों को प्रभावित करता है"। मेरे मामले में, मैं सिर्फ निर्देश के नियंत्रक को निर्देश से प्रसारण करना चाहता हूं, जिसमें मैं निर्देश का उपयोग करता हूं।क्या तब भी प्रसारण का उपयोग करना समझ में आता है? – Sam

आप प्रसारण नहीं किया जाना चाहिए नहीं, प्रसारण सभी बच्चे स्कोप के लिए माता-पिता दायरे से घटनाओं भेजने के लिए है और यू अन्य तरीके से कर रहे हैं चारों ओर –

हाँ, आप '$ गुंजाइश क्या करना चाहिए यदि आप एक माता पिता के नियंत्रक से घटनाओं को सुनने के लिए चाहते हैं। $ निर्देशक में emit' और पैरेंट नियंत्रक – joakimbl

यहाँ कैसे कॉल करने के लिए की एक टाइपप्रति उदाहरण है एक एम्बेडेड निर्देश से नियंत्रक पर एक विधि वापस। ध्यान देने योग्य सबसे महत्वपूर्ण बात यह है कि आपके कॉलबैक के लिए निर्देश का पैरामीटर नाम & परिभाषित करता है, और जब कॉलबैक को कॉल करते हैं तो आपको स्थितित्मक पैरामीटर का उपयोग नहीं करना चाहिए, बल्कि इसके बजाय किसी ऑब्जेक्ट का उपयोग लक्ष्य में पैरामीटर के नाम वाले गुणों के साथ करना चाहिए।

निर्देश रजिस्टर जैसे ही आप ऐप्लिकेशन मॉड्यूल बनाने के लिए:

module MyApp { 
    var app: angular.IModule = angular.module("MyApp"); 
    MyApp.Directives.FileUploader.register(app); 
}

पंजीकरण कोड इस प्रकार है के रूप में:

निर्देश के नियंत्रक इस

module MyApp.Directives.FileUploader { 
    export class Controller { 
     public files: string[] = ["One", "Two", "Three"]; 
     //The callback specified in the view that created this directive instance 
     public onFileItemClicked: (fileItem) => void; 

     // This is the controller method called from its HTML's ng-click 
     public fileItemClicked(fileItem) { 
      //IMPORTANT: Don't use comma separated parameters, 
      //instead use an object with property names to act as named parameters 
      this.onFileItemClicked({ 
       fileItem: fileItem 
      }); 
     } 
    } 
}

कैसा लगेगा निर्देशक का HTML कुछ

01 जैसा दिखता है

<ul> 
    <li ng-repeat="item in controller.files" ng-click="controller.fileItemClicked (item)"> 
    {{ item }} 
    </li> 
</ul>

मुख्य दृश्य इतना

<body ng-app="MyApp" ng-controller="MainController as controller"> 
    <file-uploader on-file-item-clicked="controller.fileItemClicked(fileItem)"/> 
</body>

की तरह अपने निर्देश का एक उदाहरण होगा अब सभी आप अपने MainController पर जरूरत है एक विधि

public fileItemClicked(fileItem) { 
    alert("Clicked " + fileItem); 
}

स्रोत

2016-02-01 12:25:32

इतने सारे प्रकार आप मैन्युअल रूप से लिखने की जरूरत नहीं है रहे हैं ... – Zen

व्यक्तिगत स्वाद :) –

टेम्पलेट के रूप में यह प्रयोग किया जाता है एक नेस्टेड निर्देश 2 स्तर नीचे से एक माता पिता के नियंत्रक विधि कॉल करने के। बहुत आभारी। पी। मुझे लगता है कि आपके पास निर्देशक के एचटीएमएल में एक टाइपो है - यह नियंत्रक होना चाहिए। फ़ाइल Item नियंत्रक नहीं है .onFileItem चयनित। –

AngularJS: निर्देश

उत्तर

संबंधित मुद्दे