कस्टम बच्चे निर्देश माता-पिता

Question

के दायरे तक पहुंचने के लिए मेरे कोणीय जेएस ऐप में दो कस्टम निर्देश हैं। एक माता पिता के रूप में एक अधिनियम और बच्चे के रूप में अन्य कार्य। मैं बाल निर्देश के अंदर माता-पिता के दायरे तक पहुंचने की कोशिश कर रहा हूं। लेकिन मुझे वांछित आउटपुट नहीं मिल रहा है।

<div ng-controller="CountryCtrl"> 
{{myName}} 
    <div ng-controller="StateCtrl"> 
     <state nameofthestate="'Tamilnadu'"> 
      <city nameofthecity="'Chennai'"></city> 
     </state> 
    </div> 
</div> 

और मेरी स्क्रिप्ट की तरह

var app = angular.module("sampleApp",[]); 
app.controller("CountryCtrl",function($scope){ 
    $scope.myName = "India"; 
}); 
app.controller("StateCtrl",function($scope){ 
}); 
app.directive("state",function(){return { 
    restrict : 'E', 
    transclude: true, 
    scope : { myName : '=nameofthestate'}, 
    template:"** {{myName}} is inside {{$parent.myName}}<br/><ng-transclude></ng-transclude>" 
}}); 
app.directive("city",function(){return { 
    restrict : 'E', 
    require:'^state', 
    scope : { myName : '=nameofthecity'}, 
    template:"**** {{myName}} is inside {{$parent.myName}} which is in {{$parent.$parent.myName }}<br/> " 
}}); 

https://jsbin.com/nozuri/edit?html,js,output

उत्पादन जो मैं हो रही है में JSFiddle उपलब्ध अनुरूप लग रहा है

India 
** Tamilnadu is inside India 
**** Chennai is inside India which is in Tamilnadu 

है और उम्मीद उत्पादन

है

India 
** Tamilnadu is inside India 
**** Chennai is inside Tamilnadu which is in India 

क्या कोई मुझे शिक्षित कर सकता है कि मैं यहां क्या कर रहा हूं?

Answer 1

शहर का निर्देश $ माता-पिता राज्य निर्देश का एक निर्बाध दायरा है।

राज्य निर्देश का बहिष्कृत दायरा राज्य निर्देश के $ माता-पिता के लिए उत्तराधिकारी है जो इस प्रकार नियंत्रक है इसलिए यही कारण है कि $ parent.MyName = India।

transcluded दायरे से $ माता पिता राज्य निर्देश पृथक गुंजाइश है (स्कोप = {}) है यही कारण है कि $ माता पिता। $ Parent.MyName = तमिलनाडु (कोणीय 1.3 अद्यतन का एक हिस्सा)

क्या के विस्तार के बिट होती हैं: How to access parent scope from within a custom directive *with own scope* in AngularJS?

transclude: सच - निर्देश एक नया "transcluded" बच्चे गुंजाइश है, जो माता-पिता prototypically दायरे से विरासत पैदा करता है। यदि निर्देश भी एक अलग दायरा बनाता है, तो बहिष्कृत और अलग-अलग स्कोप भाई बहन हैं। प्रत्येक स्कोप की $ पेरेंट प्रॉपर्टी समान पेरेंट स्कोप का संदर्भ देती है।

कोणीय v1.3 अद्यतन: यदि निर्देश भी एक अलग दायरा बनाता है, स्थानांतरित गुंजाइश अब अलग-अलग दायरे का बच्चा है। स्थानांतरित और अलग-अलग स्कॉप्स अब भाई बहन नहीं हैं। $ पैरेंट स्थानांतरित गुंजाइश की संपत्ति अब अलग-अलग दायरे का संदर्भ देती है।

इसके अलावा मैथ्यू का उत्तर माता-पिता के निर्देशों के संचार के लिए सही है।

Answer 2

क्या यह आपके लिए काम करता है? this answer से अनुकूलित किया गया।

स्थानांतरित सामग्री के मूल तत्व तक पहुंचने का एक सीधा तरीका नहीं है, इसलिए हम अपने दायरे तक पहुंचने के लिए बच्चे में मूल नियंत्रक को इंजेक्ट करते हैं।

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

    app.controller("CountryCtrl",function($scope){ 
     $scope.myName = "India"; 
    }); 

    app.controller("StateCtrl",function($scope){ 
    }); 

    app.directive("state",function(){return { 
     restrict : 'E', 
     transclude: true, 
     scope : { myName : '=nameofthestate'}, 
     template:"** {{myName}} is inside {{$parent.myName}}<br/><ng-transclude></ng-transclude>", 
     controller: function ($scope) { 
     this.getName = function() { 
      return $scope.myName; 
     } 
     } 
    }}); 

    app.directive("city",function(){return { 
     restrict : 'E', 
     require:'^state', 
     scope : { myName : '=nameofthecity'}, 
     template:"**** {{myName}} is inside {{parentName}} which is in {{$parent.myName }}<br/> ", 
     link: function(scope, element, attrs, ctrl) { 
     scope.parentName = ctrl.getName(); 
     } 
    }}); 

Answer 3

जब कोणीय जेएस मुठभेड़ों को पार करते हैं, तो यह से पहले HTML को क्लोन या टेम्पलेट यूआरएल सामग्री के साथ बदल देता है।फिर, जब यह एनजी-ट्रांसफर से मुकाबला करता है, तो यह स्थानांतरित सामग्री को संकलित करता है, लेकिन निर्देश के अलग-अलग दायरे के बजाय इसे मूल दायरे से जोड़ता है। इस प्रकार, स्थानांतरित सामग्री को अभी भी अभिभावक नियंत्रक और इसकी सामग्री तक पहुंच है, जबकि निर्देश एचटीएमएल में अलग-अलग दायरे (या एक नया दायरा, जैसा भी मामला हो) है।

AngularJS ऊपर और समाप्त होने वाले हैं

Answer 4

चेक मेरी निर्देश का sollution, यह parrents का एक बहुत साथ काम करता है। मैंने जो किया वह निष्कासन को हटाने और पैराम की आवश्यकता थी। गंदे एचटीएमएल के बारे में परेशान मत हो, बस जेएस देखें, एफ के रूप में सरल ..: डी

CRM.directive('inputwv', function ($compile) { 
    var getTemplate = function(contentType) { 
     var template = ''; 

     switch(contentType) { 
       case '3': 
        template = '<input type="number" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index)" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px;width:100px">' 
        break; 
       case '0': 
        template = '<input type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index)" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">' 
        break; 
       case '1': 
        template = '<input type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index)" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">' 
        break; 
       case '2': 
        template = '<textarea class="materialize-textarea teal-text" type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index)" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">' 
        break; 
       case '4': 
        template = '<input type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index)" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">' 
        break; 
       case '5': 
        template = '<input type="date" class="datepicker" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index)" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px"><script type="text/javascript">$(\'.datepicker\').pickadate({selectMonths: true, selectYears: 15});</script>' 
        break; 
       default: 
        template = '<textarea class="materialize-textarea teal-text" type="text" ng-init="inputHide[$parent.$index][$index]=false" ng-blur="inputHide[$parent.$index][$index]=false" ng-Enterd="updateRecord(row[0], $parent.$index)" ng-Enteru="inputHide[$parent.$index][$index]=false" ng-model="row[$index]" ng-change="row[$index]" ng-value="row[$index]" ng-Right-Click="click(element, $index, $parent.$index)" ng-esc="inputHide[$parent.$index][$index]=false" style="cursor:cell;border-bottom:0px">' 
      } 

     return template; 
} 

    var linker = function(scope, element, attrs) { 
     element.html(getTemplate(attrs.typ)).show(); 

     $compile(element.contents())(scope); 
    } 

    return { 
     restrict: "E", 
     link: linker 
    }; 
});