एंगुलरजेएस निर्देश कई तर्कों के साथ एक फ़ंक्शन को बाध्यकारी

मुझे निर्देश में कॉलबैक फ़ंक्शन के साथ नियंत्रक में परिभाषित फ़ंक्शन को बाध्य करने में कुछ परेशानी हो रही है।एंगुलरजेएस निर्देश कई तर्कों के साथ एक फ़ंक्शन को बाध्यकारी

मेरी नियंत्रक में: मेरे कोड निम्नलिखित की तरह लग रहा

$scope.handleDrop = function (elementId, file) { 
    console.log('handleDrop called'); 
}

तब मेरे निर्देश:

.directive('myDirective', function() { 
    return { 
     scope: { 
     onDrop: '&' 
     }, 
     link: function(scope, elem, attrs) { 
     var myFile, elemId = [...] 

     scope.onDrop(elemId, myFile); 
     } 
    });

और मेरी html पृष्ठ में:

<my-directive on-drop="handleDrop"></my-directive>

के साथ कोई भाग्य के बाद उपरोक्त कोड मैंने विभिन्न ट्यूटोरियल में जो पढ़ा है, उससे मैं समझता हूं कि मुझे HTML पृष्ठ में तर्क निर्दिष्ट करना है?

स्रोत

2013-09-24 Joseph Paterson

वहाँ अपने कोड में एक छोटी सी गलती है, नीचे दिए गए कोड का प्रयास करें और यह आपको

<!doctype html> 
<html ng-app="test"> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script> 

    </head> 
<body ng-controller="test" >  


<!-- tabs --> 
<div my-directive on-drop="handleDrop(elementId,file)"></div> 

<script> 
    var app = angular.module('test', []); 

    app.directive('myDirective', function() { 
     return { 
      scope: { 
       onDrop: '&' 
      }, 
      link: function (scope, elem, attrs) { 
       var elementId = 123; 
       var file = 124; 
       scope.onDrop({elementId:'123',file:'125'}); 

      } 
     } 
    }); 

    app.controller('test', function ($scope) { 
     alert("inside test"); 
     $scope.handleDrop = function (elementId, file) { 
      alert(file); 
     } 
    }); 

    </script> 
</body> 


</html>

स्रोत

2013-09-24 06:01:07

कोणीय दस्तावेज में यह व्यवहार कहां परिभाषित किया गया है? –

दस्तावेज़ों में एक वास्तविक विषय प्रतीत नहीं होता है लेकिन विषय निर्देशों का लिंकिंग फ़ंक्शन है, http://docs.angularjs.org/guide/directive – tommybananas

जाहिर है पैरामीटर नामों को बिल्कुल मार्कअप से मेल खाना है; मुझे आश्चर्य है कि क्या यह खनन से बच जाएगा? – TrueWill

100

वैकल्पिक विधि कि minification बच जाएगा के लिए काम करना चाहिए

अपने html छोड़ के रूप में यह था:

<my-directive on-drop="handleDrop"></my-directive>

परिवर्तन कॉल करने के लिए:

scope.onDrop()('123','125')

ऑन्रॉप को दिए गए अतिरिक्त उद्घाटन और समापन कोष्ठक पर ध्यान दें। यह फ़ंक्शन के कोड को इंजेक्ट करने के बजाय फ़ंक्शन को तुरंत चालू करेगा।

क्यों (यदि आप इसे सही ढंग से संभाल या यहाँ तक कि, कुछ और अधिक जोड़ने) नहीं होगा आप निर्देशों में से प्रत्येक को बदलने बेहतर

handleDrop में पैरामीटर के नाम बदल रहा है() परिभाषा है एचटीएमएल में इंजेक्शन। बहुत ड्रियर
@TrueWill के रूप में सुझाव दिया गया है, मुझे यकीन है कि अन्य समाधान खनन से बच नहीं पाएंगे, जबकि इस तरह कोड अधिकतम लचीलापन के साथ रहता है और नाम अज्ञेयवादी है। के रूप में
करने का विरोध
```
functionName({xName: x, yName: y}) 
```
(और प्रत्येक निर्देश का कॉल में समारोह हस्ताक्षर जोड़कर)

:

एक और व्यक्तिगत कारण वस्तु वाक्य रचना है, जो मुझे भी बहुत कुछ कोड लिखने बनाता है

functionName()(x,y)

(आपके एचटीएमएल में शून्य रखरखाव)

मुझे यह महान समाधान here मिला।

उम्मीद है कि मदद करता है!

स्रोत

2014-10-07 20:22:35 nurinur

यह मेरे लिए भी काम करता था, लेकिन मुझे ऑब्जेक्ट नोटेशन का उपयोग करने में कोई समस्या थी। स्पष्ट रूप से टाइपस्क्रिप्ट में कक्षाओं का उपयोग कर। [यह टिप्पणी] (http://stackoverflow.com/questions/38777903/invoking-function-breaks-scope?noredirect=1#comment64927293_38777903) ने इसे ठीक करने में मेरी सहायता की। –

एंगुलरजेएस निर्देश कई तर्कों के साथ एक फ़ंक्शन को बाध्यकारी

उत्तर

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