angularjs रैपर निर्देश से लपेटा निर्देश

Question

मैं अंगुलर के लिए नया हूं और अभी भी अपने निर्देशों को कस्टम निर्देशों के चारों ओर लपेट रहा हूं।

मैं अपने कस्टम निर्देश में लपेटकर द्वारा एचटीएमएल

<ui-select ng-model="model.selectedLanguages" multiple search-enabled="true" theme="select2" style="width: 300px;"> 
    <ui-select-match placeholder="Pick one...">{{$item.name}}</ui-select-match> 
    <ui-select-choices repeat="lang.id as lang in langs |filter: { name : $select.search }"> 
     <div ng-bind-html="lang.name | highlight: $select.search" ></div> 
    </ui-select-choices> 
</ui-select> 

के इस बिट का पुन: उपयोग करना चाहते हैं:

<language-picker ng-model="model.selectedLanguages"/> 

कुछ इस तरह:

app.directive('languagePicker', function() { 
      return { 
       template : '<ui-select ng-model="**PARENT'S NGMODEL**" multiple search-enabled="true" theme="select2" style="width: 300px;"><ui-select-match >{{$item.name}}</ui-select-match><ui-select-choices repeat="lang.id as lang in langs | filter: { name : $select.search }"><div ng-bind-html="lang.name | highlight: $select.search"></div></ui-select-choices></ui-select>', 
       restrict : 'E', 
       require : 'ngModel', 
       replace : true 
        .... 
      }; 
     }); 

लेकिन कैसे करना है मैं ngModel को language-picker से ui-select निर्देश पर पास करता हूं?

अद्यतन

नीचे दिए गए सुझावों का उपयोग करना, मैं इसे ui-चयन के साथ काम मिल गया है, लेकिन बाहरी मॉडल सब पर अद्यतन नहीं होता है, plnkr.co/edit/Y43dmMGIc5GxM9fLoNPW देखते हैं, शायद इसलिए है क्योंकि यह बच्चे गुंजाइश है और माता पिता के दायरे बनी हुई है वही?

अद्यतन 2

मैं इसे एक जटिल तरीका है कि मेरे लिए भयानक लग रहा है में काम करते हैं क्योंकि मुझे पता नहीं है कारण है कि यह "काम" पहली जगह में (अजीब सामान में क्या हो रहा है देखने के लिए मिल गया है नियंत्रक):

app.directive('languagePicker', function(LanguageService) { 
      return { 
       templateUrl : 'LanguagePickerTpl.html', 
       restrict : 'E', 
       scope : { 
        languages : '=' 
       }, 
       controller : function($scope, LanguageService) { 
        console.log($scope); 
        $scope.langs = LanguageService.get(); 
        $scope.model = $scope; 
       } 

      }; 
     }) 

टेम्पलेट:

<ui-select ng-model="model.languages" multiple search-enabled="true" 
    theme="select2" style="width: 300px;"> 
    <ui-select-match>{{$item.name}}</ui-select-match> 
    <ui-select-choices repeat="lang.id as lang in langs | filter: { name : $select.search }"> 
     <div ng-bind-html="lang.name | highlight: $select.search"></div> 
    </ui-select-choices> 
    </ui-select> 

मैं बहुत खुश हो सकता है अगर किसी को समझा सकता है क्या हो रहा है ("काम" exa

< language-picker language="model.selectedLanguage" />

और निर्देश के अंदर भाषा संपत्ति का उपयोग करें: mple यहाँ http://plnkr.co/edit/B53F9sc7UGkj0uxUpC17 )

Answer 1

आपको निर्देशक के दायरे पर "बराबर" वाक्यविन्यास का उपयोग करने की आवश्यकता है। यह मूल दायरे में आबादी वाले मूल्यों को बनाए रखेगा। तो अपने निर्देश हो जाता है:

app.directive('languagePicker', function() { 
     return { 
      template : '<ui-select ng-model="**PARENT'S NGMODEL**" multiple search-enabled="true" theme="select2" style="width: 300px;"><ui-select-match >{{$item.name}}</ui-select-match><ui-select-choices repeat="lang.id as lang in langs | filter: { name : $select.search }"><div ng-bind-html="lang.name | highlight: $select.search"></div></ui-select-choices></ui-select>', 
      restrict : 'E', 
      require : 'ngModel', 
      replace : true, 
      scope: { 
       ngModel: "=ngModel" 
      } 
      ... 
     }; 
    }); 

मुझे विश्वास है कि यह आपके लिए काम करेंगे हूँ :) मुझे पता है अगर ऐसा नहीं होता है!

Answer 2

आप इस तरह के रूप में निर्देश के लिए एक संपत्ति के रूप में model.selectedLanguages ​​पारित कर सकते हैं है। आप तय कर सकते हैं कि आपको किस दायरे की आवश्यकता है।

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

आधिकारिक दस्तावेज़ीकरण में वास्तव में बहुत सारे उदाहरण हैं। https://docs.angularjs.org/guide/directive

Answer 3

ng-model में कुछ विशेष हैंडलिंग है, "कस्टम नियंत्रण उदाहरण" शीर्षक के तहत here देखें।चरण हैं:

1. मेरा सुझाव है कि आप अलग-अलग दायरे का उपयोग करें; यह आपके घटक को इंटरफ़ेस बनाता है और आपको साइड इफेक्ट्स से बचाता है।

   scope: { 
       langs: '=' 
   } 
   

   प्रयोग होगा:: इस मामले में आप (भाषा) उपलब्ध विकल्पों की सूची पास करना चाहते हैं

   <language-picker ng-model="model.selectedLanguages" langs="langs"/> 
   

2. आपका निर्देश (शायद वैकल्पिक) की आवश्यकता है ngModel:

   require: ['ngModel'] 
   

3. आप ngModel की $render विधि ओवरराइड करते हैं, उदाहरण के लिए:

   link: function(scope,elem,attrs,ctrls) { 
       var ngModelCtrl = ctrls[0]; 
       ngModelCtrl.$render = function() { 
        ... 
       }; 
   } 
   

   प्रस्तुत करने का तर्क मॉडल मान को स्थानांतरित करने के लिए ज़िम्मेदार है (यहां एक: <language-picker ng-model="model.selectedLanguages"/>, यानी model.selectedLanguages) दृश्य में। सबसे सरल बात मैं के बारे में सोच सकते हैं, उपयोग पृथक गुंजाइश और अलग गुंजाइश के एक चर करने के लिए स्थानांतरण बाहरी मॉडल मूल्य है के रूप में:

   ngModelCtrl.$render = function() { 
        scope.innerSelection = ngModelCtrl.$viewValue; 
       }; 
   

   बाइंड जैसा कि टेम्प्लेट में इस चर:

   // still inside link() 
       scope.$watch('innerSelection', function(newval, oldval) { 
        if(newval != oldval) { // skip the first time 
         ngModelCtrl.$setViewValue(newval); 
        } 
       }); 
   

:

<ui-select ng-model="innerSelection" ...> 
    ... 
</ui-select> 

4. अंतिम आप यह सुनिश्चित करें कि आंतरिक चयन में परिवर्तन बाहरी मॉडल को प्रचारित किया जाएगा बनाने के लिए है

यह समाधान दूसरों की तुलना में थोड़ा अधिक शामिल हो सकता है, लेकिन आपको ngModel की सभी सुविधाओं का उपयोग करने देता है, उदाहरण के लिए सत्यापन, पार्सिंग/स्वरूपण (यानी डेटा रूपांतरण)।