2014-05-05 11 views
25

के साथ निर्देशक अभिभावक दायरे पर कॉल फ़ंक्शन मैं एक निर्देश विकसित कर रहा हूं जो इसके टेम्पलेट में परिभाषित एक क्लिक ईवेंट (एनजी-क्लिक) के आधार पर इसकी सामग्री को दिखाता है और छुपाता है। कुछ विचारों पर जहां निर्देश का उपयोग किया जाता है, मैं यह जानना चाहता हूं कि निर्देश वर्तमान में दिखा रहा है या इसकी सामग्री को छुपा रहा है, इसलिए मैं डीओएम परिवर्तनों का जवाब दे सकता हूं। निर्देश अलग-अलग गुंजाइश है और जब निर्देश "टॉगल" किया गया है, तो मैं अभिभावक के दायरे को सूचित करने की कोशिश कर रहा हूं। मैं इसे कॉलबैक फ़ंक्शन को निर्देशित करने के लिए इसे पूरा करने का प्रयास कर रहा हूं, जहां इसका उपयोग किया जाता है जिसे निर्देशक के राज्य में परिवर्तन यानीनिर्देश स्कोप तर्क

मुझे यकीन नहीं है कि राज्य को सही तरीके से कैसे कार्यान्वित किया जाए निर्देश (छुपा या दिखाया गया) निर्देश के अलग-अलग दायरे में संग्रहीत किया जाता है और एनजी-क्लिक के बाद निर्धारित किया जाता है। इसलिए मुझे निर्देश के भीतर से माता-पिता के दायरे के कार्य को कॉल करने की आवश्यकता है, न कि दृश्य को देखने से।

इससे एक उदाहरण के साथ WAAY अधिक समझदारी होगी। यहाँ एक plunked का प्रदर्शन कर रहा है मुझे क्या करना चाहते हैं:

http://plnkr.co/edit/hHwwxjssOKiphTSO1VIS?p=info

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

app.controller('MainController', function($scope){ 
    $scope.myValue = 'test value'; 
    $scope.parentToggle = function(value){ 
    $scope.myValue = value; 
    }; 
}); 

app.directive('toggle', function(){ 
    return { 
      restrict: 'A', 
      template: '<a ng-click="toggle();">Click Me</a>', 
      replace: true, 
      scope: { 
       OnToggle: '&' 
      }, 
      link: function($scope, elem, attrs, controller) { 
       $scope.toggleValue = false; 
       $scope.toggle = function() { 
        $scope.toggleValue = !$scope.toggleValue; 
        $scope.OnToggle($scope.toggleValue) 
       }; 
      } 
     }; 
}); 

मैं अपेक्षाकृत कोणीय के लिए नया हूँ। क्या यह शुरू करना एक बुरा विचार है? क्या मुझे फ़ंक्शन रेफरी पास करने के बजाय सेवा या कुछ उपयोग करना चाहिए?

धन्यवाद!

उत्तर

45

अद्यतन

तुम भी & उपयोग कर सकते हैं जड़ दायरे से समारोह बाध्य करने के लिए (जो वास्तव में & का उद्देश्य है)।

app.directive('toggle', function(){ 
    return { 
    restrict: 'A', 
    template: '<a ng-click="f()">Click Me</a>', 
    replace: true, 
    scope: { 
     toggle: '&' 
    }, 
    controller: function($scope) { 
     $scope.toggleValue = false; 
     $scope.f = function() { 
     $scope.toggleValue = !$scope.toggleValue; 
     $scope.toggle({message: $scope.toggleValue}); 
     }; 
    } 
    }; 
}); 

आप इस तरह उपयोग कर सकते हैं:

<div toggle="parentToggle(message)"></div> 

Plunk


आप = का उपयोग कर समारोह के लिए बाध्य कर सकता है

ऐसा करने के लिए निर्देश थोड़ा बदलने की आवश्यकता । इसके अलावा यह सुनिश्चित करें कि आपके दायरे और टैग में संपत्ति का नाम मिलान कर रहा है (AngularJS CamelCase को डैश नोटेशन पर अनुवाद करता है)।

से पहले:

scope: { 
    OnToggle: '&' 
} 

के बाद:

scope: { 
    onToggle: '=' 
} 

इसके अलावा अपने मुख्य टेम्पलेट में on-toggle="parentToggle({value: toggleValue})" प्रयोग नहीं करते। आप फ़ंक्शन को कॉल नहीं करना चाहते हैं, लेकिन निर्देश के लिए फ़ंक्शन के पॉइंटर को पास करना चाहते हैं।

Plunk

+2

यही मुझे चाहिए। धन्यवाद महोदय। – Nick

+0

@ निक मैंने थोड़ा गहरा खोद दिया और रूट स्कोप के कार्य को बांधने के लिए '&' का उपयोग करके एक विकल्प जोड़ा। शायद यह * कोणीय * है। – Sebastian

+0

आपका प्लंकर वही करता है जो मैं करने की कोशिश कर रहा हूं, लेकिन मुझे इसे मेरे कोड में पोर्ट करने में परेशानी हो रही है।क्या कोई कारण है कि यह एलिमेंट-टाइप निर्देश के लिए काम नहीं करेगा? या क्या कुछ भी है जो मुझे अलग-अलग करने की ज़रूरत होगी? – stranger

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