angularjs में गतिशील निर्देश

Question

दायरे को अद्यतन होने पर निर्देश के गुण परिवर्तित नहीं होते हैं, फिर भी वे प्रारंभिक मान रखते हैं। मुझे यहां क्या समझ नहीं आ रहा है?

एचटीएमएल

<ul class="nav nav-pills nav-stacked" navlist> 
    <navelem href="#!/notworking/{{foo}}"></navelem> 
    <navelem href="#!/working">works great</navelem> 
</ul> 

<p>works: {{foo}}</p> 

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

angular.module('myApp.directives', []). 
directive('navlist', function() { 
    return { 
     scope: {}, 
     controller: function ($scope) { 
      var panes = $scope.panes = []; 

      this.select = function(pane) { 
       angular.forEach(panes, function(pane) { 
        pane.selected = false; 
       }); 
       pane.selected = true; 
      } 

      this.addPane = function(pane) { 
       if (panes.length == 0) 
        this.select(pane); 
       panes.push(pane); 
      } 

     } 
    } 
}). 
directive('navelem', function() { 
    return { 
     require: '^navlist', 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     scope: { href: '@href' }, 
     link: function(scope, element, attrs, tabsCtrl) { 
      tabsCtrl.addPane(scope); 
      scope.select = tabsCtrl.select; 
     }, 
     template: 
      '<li ng-class="{active: selected}" ng-click="select(this)"><a href="{{href}}" ng-transclude></a></li>' 
    }; 
}); 

Answer 1

(सामने के पृष्ठ पर कोणीय टैब उदाहरण के आधार पर) अपने निर्देश में scope: {} परिभाषित करने से, यह एक isolated scope पैदा कर रही है। तो माता-पिता का दायरा अब निर्देश से अदृश्य है।

यदि आप मूल दायरे को संदर्भित करना चाहते हैं, तो आप साझा स्कोप (उसी निर्देशों के बीच) के लिए scope: true डाल सकते हैं और केवल सामान्य स्कोप घोंसले के लिए दायरे की घोषणा छोड़ सकते हैं। या यदि आप माता-पिता के $scope.foo को संदर्भित करना चाहते हैं, तो आप स्पष्ट दायरे चर को परिभाषित कर सकते हैं जैसे आपने बाल निर्देश में किया है।

Answer 2

निर्देश गुंजाइश विरासत के तीन प्रकार के होते हैं:

1. नहीं 'गुंजाइश: ...' या स्पष्ट scope: false - कोई नया गुंजाइश बनाई गई है। निर्देश माता-पिता के समान दायरे का उपयोग करता है। यह सरल और सुविधाजनक है, लेकिन यदि आप पुन: प्रयोज्य घटकों का निर्माण कर रहे हैं, तो इसकी अनुशंसा नहीं की जाती है, क्योंकि निर्देश केवल तभी प्रयोग योग्य होगा जब माता-पिता के दायरे में कुछ दायरे गुण परिभाषित किए गए हैं कि निर्देश का उपयोग/उपयोग करने की आवश्यकता है।
2. scope: true - माता-पिता के दायरे की सामान्य प्रोटोटाइपिक विरासत के साथ, एक ही तत्व पर सभी निर्देशों द्वारा साझा किया गया एक नया दायरा बनाता है। फिर, शायद पुन: प्रयोज्य घटकों के लिए सबसे अच्छा विकल्प नहीं है, क्योंकि निर्देश के पास शायद मूल दायरे गुणों तक पहुंच नहीं होनी चाहिए - यह गलती से माता-पिता में कुछ बदल सकता है।
3. scope: { ... } - एक नया "पृथक" दायरा बनाता है - यह प्रोटोकॉलिक रूप से मूल दायरे से प्राप्त नहीं होता है। हालांकि, ऑब्जेक्ट हैश (यानी, {...}) हमें स्थानीय दायरे से प्राप्त स्थानीय निर्देश स्कोप गुणों को परिभाषित करने की अनुमति देता है - ताकि हम नियंत्रित कर सकें कि कौन से गुण साझा किए जाते हैं, और कैसे।
   1. अभिभावक स्कोप संपत्ति और निर्देश स्कोप संपत्ति के बीच शक्तिशाली 2-तरफा बाध्यकारी के लिए '=' का उपयोग करें - किसी भी दायरे की संपत्ति में परिवर्तन दूसरे को प्रभावित करते हैं।
   2. किसी निर्देशक दायरे की संपत्ति के लिए माता-पिता के गुण मान को बाध्य करने के लिए '@' का उपयोग करें। यह अनिवार्य रूप से 1-रास्ता बाध्यकारी है। केवल माता-पिता के दायरे में परिवर्तन प्रत्यक्ष दायरे को प्रभावित करते हैं।
   3. अभिभावक स्कोप अभिव्यक्तियों/कार्यों से जुड़ने के लिए '&' का उपयोग करें।

अपने विशेष समस्या के लिए, आप वस्तु हैश जो गुंजाइश गुण आप 2 तरह बंधन करना चाहते हैं में से संकेत मिलता है की जरूरत है।

निर्देश स्कोप (चित्रों सहित) के लिए, कृपया खंड देखें निर्देशों यहाँ के लिए: What are the nuances of scope prototypal/prototypical inheritance in AngularJS?

Answer 3

मार्क Rajcok तरह

कहा - गुंजाइश: {एक नया पृथक गुंजाइश है कि माता पिता से गुण वारिस नहीं है पैदा करेगा} हालांकि, हम अभी भी $ मूल संपत्ति का उपयोग कर इन गुणों तक पहुंच प्राप्त कर सकते हैं।

नियंत्रक:

app.controller('indexController', function($scope) { 
    $scope.test="Hello world!"; 
}); 

निर्देशक

app.directive("test", function() { 
    return{ 
     restrict: "A", 
     scope: {}, 
     controller: function($scope){ 
      console.log("directiv $scope.$parent.test: " + $scope.$parent.test); 
      console.log("directiv $scope.test: " + $scope.test); 
     } 
    }; 
}); 

उत्पादन:

directiv $scope.$parent.test: Hello world! 
directiv $scope.test: undefined