कैसे एक AngularJS निर्देश में एक नियंत्रक

Question

किसी को मुझे बताओ कि एक और AngularJS निर्देश में एक निर्देश से एक नियंत्रक शामिल करने के लिए कर सकते हैं की आवश्यकता होती है। उदाहरण के लिए मुझे लगता है मैं addProduct निर्देश में नियंत्रक का उपयोग करने के लिए सक्षम होना चाहिए, लेकिन मैं नहीं कर रहा हूँ निम्नलिखित कोड

var app = angular.module('shop', []). 
config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.when('/', { 
     templateUrl: '/js/partials/home.html' 
    }) 
     .when('/products', { 
     controller: 'ProductsController', 
     templateUrl: '/js/partials/products.html' 
    }) 
     .when('/products/:productId', { 
     controller: 'ProductController', 
     templateUrl: '/js/partials/product.html' 
    }); 
}]); 

app.directive('mainCtrl', function() { 
    return { 
     controller: function ($scope) {} 
    }; 
}); 

app.directive('addProduct', function() { 
    return { 
     restrict: 'C', 
     require: '^mainCtrl', 
     link: function (scope, lElement, attrs, mainCtrl) { 
      //console.log(cartController); 
     } 
    }; 
}); 

सभी खाता तक की है। क्या ऐसा करने का कोई बेहतर तरीका है?

Answer 1

मैं भाग्यशाली और सवाल के लिए एक टिप्पणी में यह उत्तर दिया, लेकिन मैं पूर्णता के लिए के लिए एक पूर्ण उत्तर पोस्ट कर रहा हूँ और इसलिए हम "के रूप में उत्तर दिया" इस सवाल चिह्नित कर सकते हैं।

---

यह एक नियंत्रक साझा करके आप जो हासिल करना चाहते हैं उस पर निर्भर करता है; आप या तो एक ही नियंत्रक साझा कर सकते हैं (हालांकि अलग-अलग उदाहरण हैं), या आप एक ही नियंत्रक उदाहरण साझा कर सकते हैं।

शेयर एक नियंत्रक

दो निर्देशों ही नियंत्रक एक ही विधि पारित करके दो निर्देशों है, इसलिए की तरह उपयोग कर सकते हैं:

app.controller('MyCtrl', function ($scope) { 
    // do stuff... 
}); 

app.directive('directiveOne', function() { 
    return { 
    controller: 'MyCtrl' 
    }; 
}); 

app.directive('directiveTwo', function() { 
    return { 
    controller: 'MyCtrl' 
    }; 
}); 

प्रत्येक निर्देश नियंत्रक का अपना ही उदाहरण मिल जाएगा, लेकिन यह आपको जितना चाहें उतने घटकों के बीच तर्क साझा करने की अनुमति देता है।

एक नियंत्रक आवश्यकता

आप एक नियंत्रक के एक ही उदाहरण साझा करना चाहते हैं, तो आप require का उपयोग करें।

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

^require, कैरेट के अतिरिक्त, अन्य निर्देश खोजने के लिए वर्तमान तत्व के अलावा निर्देश के ऊपर तत्वों की जांच करता है। यह आपको जटिल घटकों जहां "उप घटकों" महान प्रभाव के लिए अपने नियंत्रक के माध्यम से माता-पिता घटक के साथ संवाद कर सकते हैं बनाने के लिए अनुमति देता है। उदाहरणों में टैब शामिल हो सकते हैं, जहां प्रत्येक फलक स्विचिंग को संभालने के लिए समग्र टैब के साथ संवाद कर सकती है; एक accordion सेट सुनिश्चित कर सकता है कि एक समय में केवल एक खुला है; आदि

या तो घटना में, आप दो निर्देशों इस के लिए एक साथ उपयोग करने के लिए काम करना है। require घटकों के बीच संवाद करने का एक तरीका है।

अधिक जानकारी के लिए निर्देशों के गाइड पेज की जाँच करें: http://docs.angularjs.org/guide/directive

Answer 2

एक अच्छा stackoverflow जवाब यहाँ मार्क Rajcok से है:

AngularJS directive controllers requiring parent directive controllers?

यह बहुत स्पष्ट jsFiddle के लिंक के साथ

: http://jsfiddle.net/mrajcok/StXFK/

<div ng-controller="MyCtrl"> 
    <div screen> 
     <div component> 
      <div widget> 
       <button ng-click="widgetIt()">Woo Hoo</button> 
      </div> 
     </div> 
    </div> 
</div> 

जावास्क्रिप्ट

var myApp = angular.module('myApp',[]) 

.directive('screen', function() { 
    return { 
     scope: true, 
     controller: function() { 
      this.doSomethingScreeny = function() { 
       alert("screeny!"); 
      } 
     } 
    } 
}) 

.directive('component', function() { 
    return { 
     scope: true, 
     require: '^screen', 
     controller: function($scope) { 
      this.componentFunction = function() { 
       $scope.screenCtrl.doSomethingScreeny(); 
      } 
     }, 
     link: function(scope, element, attrs, screenCtrl) { 
      scope.screenCtrl = screenCtrl 
     } 
    } 
}) 

.directive('widget', function() { 
    return { 
     scope: true, 
     require: "^component", 
     link: function(scope, element, attrs, componentCtrl) { 
      scope.widgetIt = function() { 
       componentCtrl.componentFunction(); 
      }; 
     } 
    } 
}) 


//myApp.directive('myDirective', function() {}); 
//myApp.factory('myService', function() {}); 

function MyCtrl($scope) { 
    $scope.name = 'Superhero'; 
}