मैं एक Angular.js विशेषता निर्देश में कई विशेषताएँ कैसे पास करूँ?

Question

मेरे पास एक विशेषता निर्देश है जो निम्नानुसार प्रतिबंधित है:

 restrict: "A"

मुझे दो विशेषताओं में पास होने की आवश्यकता है; संख्या और एक फ़ंक्शन / कॉलबैक, attrsऑब्जेक्ट का उपयोग करके निर्देश के भीतर उन तक पहुंचना ।

यदि निर्देश एक तत्व निर्देशन था, तो "E"मैं इसके साथ प्रतिबंधित हूं:

<example-directive example-number="99" example-function="exampleCallback()">

हालाँकि, जिन कारणों से मैं इसमें नहीं जाऊँगा, मुझे एक निर्देश निर्देशक बनने के लिए निर्देश की आवश्यकता होगी।

मैं एक विशेषता निर्देश में कई विशेषताओं को कैसे पास करूं?

Comments

यह उस दिशा पर निर्भर करता है कि आपका निर्देशन किस प्रकार का है (यदि कोई है)। विकल्प हैं: कोई नया स्कोप (डिफ़ॉल्ट या स्पष्ट scope: false), नया स्कोप (सामान्य प्रोटोटाइप विरासत, यानी scope: true) के साथ, और अलग स्कोप (यानी, scope: { ... })। आपका निर्देशन किस प्रकार का दायरा बनाता है?

— मार्क राजकॉक

@ मर्कराजकोक में इसका अलग-अलग दायरा है।

— Undistraction

Answer 1

निर्देश किसी भी विशेषता को उसी तत्व पर परिभाषित कर सकता है, भले ही वह निर्देश ही तत्व क्यों न हो।

टेम्पलेट:

<div example-directive example-number="99" example-function="exampleCallback()"></div>

निर्देशक:

app.directive('exampleDirective ', function () {
    return {
        restrict: 'A',   // 'A' is the default, so you could remove this line
        scope: {
            callback : '&exampleFunction',
        },
        link: function (scope, element, attrs) {
            var num = scope.$eval(attrs.exampleNumber);
            console.log('number=',num);
            scope.callback();  // calls exampleCallback()
        }
    };
});

fiddle

यदि विशेषता का मान example-numberहार्ड-कोड किया जाएगा, तो मैं $evalएक बार उपयोग करने का सुझाव देता हूं , और मूल्य को संग्रहीत करता हूं । चर numका सही प्रकार (एक संख्या) होगा।

Comments

मैंने साँप-केस का उपयोग करने के लिए उदाहरण HTML का संपादन किया है। मुझे पता है कि मैं इसे एक तत्व के रूप में उपयोग नहीं कर सकता। यह सवाल का मुद्दा है।

— अविश्वास

@Pedr, हाँ, क्षमा करें मैं तत्व उपयोग के बारे में बहुत तेजी से पढ़ता हूं। मैंने जवाब अपडेट किया, यह देखते हुए कि आपको विशेषताओं के लिए भी साँप-केस का उपयोग करने की आवश्यकता है।

— मार्क राजकोक

कोई दिक्कत नहीं है। आपके उत्तर के लिए धन्यवाद। मैंने साँप-केस का उपयोग करने के लिए विशेषता नाम संपादित किए हैं। आप ठीक हैं अगर मैं आपके उत्तर से हटा दूं क्योंकि यह मेरे द्वारा सिर्फ एक मूर्खतापूर्ण त्रुटि थी और वास्तविक प्रश्न और उत्तर के बिंदु से विचलित होता है?

— अविश्वास

मुझे यह नहीं मिलता है - निर्देश अपने निर्देशन में निर्दिष्ट प्रत्यक्ष उपयोग ("exampleCallback ()") में निर्दिष्ट एक ही चीज़ का नाम कैसे जानता है? ("कॉलबैक: 'और उदाहरण कॉलबैक') गुंजाइश" कॉलबैक: "और उदाहरण नहीं होना चाहिए?

— ब्लास्टर

@FredrikL, एक ही तत्व पर कई निर्देशों के लिए, कृपया देखें stackoverflow.com/a/28735005/215945

— मार्क राजकॉक

Answer 2

आप इसे ठीक उसी तरह करते हैं जैसे आप किसी तत्व निर्देश के साथ करते हैं। तुम उन्हें attrs वस्तु में होगा, मेरे नमूने उन्हें अलग-अलग गुंजाइश के माध्यम से दो तरह से बाध्यकारी है, लेकिन यह आवश्यक नहीं है। यदि आप एक अलग-अलग दायरे का उपयोग कर रहे हैं, तो आप विशेषताओं के साथ scope.$eval(attrs.sample)या बस स्कोप का उपयोग कर सकते हैं। नमूना, लेकिन उन्हें आपकी स्थिति के आधार पर लिंक करने में परिभाषित नहीं किया जा सकता है।

app.directive('sample', function () {
    return {
        restrict: 'A',
        scope: {
            'sample' : '=',
            'another' : '='
        },
        link: function (scope, element, attrs) {
            console.log(attrs);
            scope.$watch('sample', function (newVal) {
                console.log('sample', newVal);
            });
            scope.$watch('another', function (newVal) {
                console.log('another', newVal);
            });
        }
    };
});

इसके समान इस्तेमाल किया:

<input type="text" ng-model="name" placeholder="Enter a name here">
<input type="text" ng-model="something" placeholder="Enter something here">
<div sample="name" another="something"></div>

Answer 3

आप एक वस्तु को विशेषता के रूप में पारित कर सकते हैं और इसे निर्देश में इस तरह से पढ़ सकते हैं:

<div my-directive="{id:123,name:'teo',salary:1000,color:red}"></div>

app.directive('myDirective', function () {
    return {            
        link: function (scope, element, attrs) {
           //convert the attributes to object and get its properties
           var attributes = scope.$eval(attrs.myDirective);       
           console.log('id:'+attributes.id);
           console.log('id:'+attributes.name);
        }
    };
});

Comments

क्या किसी वस्तु का उपयोग करके बूलियन मूल्य भेजना संभव है? मैंने कोशिश की {{true}}लेकिन यह अभी भी स्ट्रिंग मान लौटाता है true।

— पीटर बोम्मा

Answer 4

यह मेरे लिए काम करता है और मुझे लगता है कि अधिक HTML5 अनुरूप है। 'डेटा-' उपसर्ग का उपयोग करने के लिए आपको अपना html बदलना चाहिए

<div data-example-directive data-number="99"></div>

और निर्देश के भीतर चर के मूल्य को पढ़ें:

scope: {
        number : "=",
        ....
    },

Answer 5

यदि आपको किसी अन्य निर्देश से "exampleDirective" की आवश्यकता है तो + आपका तर्क 'exampleDirective' के नियंत्रक में है (मान लीजिए कि 'exampleCtrl'):

app.directive('exampleDirective', function () {
    return {
        restrict: 'A',
        scope: false,
        bindToController: {
            myCallback: '&exampleFunction'
        },
        controller: 'exampleCtrl',
        controllerAs: 'vm'
    };
});
app.controller('exampleCtrl', function () {
    var vm = this;
    vm.myCallback();
});