निर्देश के साथ इनपुट करने के लिए ngModel जोड़ना

Question

मेरे पास एक इनपुट तत्व है और मैं एक कस्टम निर्देश का उपयोग कर ngModel और ngClass को बांधना चाहता हूं, लेकिन मुझे कुछ परेशानी हो रही है।

मैं क्या है:

<input type="text" myDirective="PropertyFromScope" /> 

क्या मैं परिणाम के रूप में चाहते हैं:

<input type="text" ng-model="PropertyFromScope" ng-class="{'class' : MethodFromScope}" /> 

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

यहाँ मैं अब तक क्या मिला है:

angular.module('customDirectives', []) 
.directive('myDirective', function() { 
    var linker = function (scope, element, attrs) { 
     attrs.$set('ngModel', attrs.myDirective); 
     attrs.$set('ngClass', '{\'class\' : MethodFromScope}'); 
    } 
    return { 
     restrict: 'A',   
     link: linker 
    } 
}); 

यहाँ एक JSFiddle है: http://jsfiddle.net/Q8QJJ/

Answer 1

आप यह पूरा करने की कोशिश कर रहे हैं?

सुंदर सरल उपाय:

myApp.directive('myDirective', function ($compile) { 
    return { 
     restrict: 'A',   
     compile: function(element, attrs) { 
      element.attr('ng-model', attrs.myDirective); 
      element.removeAttr("my-directive"); 
      element.attr('ng-class', '{\'class\' : testFunction()}'); 
      return { 
       pre: function preLink(scope, iElement, iAttrs, controller) { }, 
       post: function postLink(scope, iElement, iAttrs, controller) { 
       $compile(iElement)(scope); 
       } 
      } 
     } 
    } 
}); 

यहाँ एक बेला http://jsfiddle.net/V9e9M/

Answer 2

मैं इस एक संकलन समारोह में काम करने के लिए (यह विशेषताएं जोड़ी है, लेकिन यह उन्हें नोटिस नहीं लगता था प्राप्त करने में असमर्थ था)। बहरहाल, यह जोड़ने समारोह काम करने के लिए लगता है:

myApp.directive('myDirective', function ($compile) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var wrappedElement = angular.element(
       '<input type="' + attrs.type + '" ng-model="' 
       + attrs.myDirective + '">'); 
      element.replaceWith(wrappedElement); 
      $compile(wrappedElement)(scope); 
     } 
    } 
}); 

Fiddle

नोट: मैं एनजी श्रेणी जोड़ने के लिए भूल गया, लेकिन मुझे लगता है अगर एनजी मॉडल काम करता है, एनजी स्तरीय काम करना चाहिए।

अद्यतन:

यहाँ एक संस्करण एक संकलन समारोह का उपयोग करता है है:

myApp.directive('myDirective', function() { 
    return { 
     restrict: 'A', 
     compile: function (tElement, tAttrs) { 
      // for some unknown-to-me reason, the input must 
      // be wrapped in a span or div: 
      var tplElement = angular.element('<span><input></span>'); 
      var inputEl = tplElement.find('input'); 
      inputEl.attr('type', tAttrs.type); 
      inputEl.attr('ng-model', tAttrs.myDirective); 
      tElement.replaceWith(tplElement); 
     } 
    }; 
}); 

Fiddle

Answer 3

मैं एक ऐसी ही समस्या के साथ इस पृष्ठ पर उतरा, एक कस्टम निर्देश के साथ एक ngModel बाध्यकारी । सवाल कुछ साल पुराना है, लेकिन शायद मेरा समाधान किसी और की मदद करेगा।

सबसे पहले, index.html में, मैं कुछ कस्टम-अप विशेषताओं के साथ अपने कस्टम निर्देश का उपयोग कर रहा हूं। एचटीएमएल में डैश केस नोट करें। गुण मान वे हैं जो मैं निर्देश में उपयोग करना चाहता हूं।

index.html 

<div> 
    <form name="userInfo"> 
     <my-custom-directive for-model="ctrl.userInput" 
          for-label="Enter User Info" 
          for-other="more info for the directive"> 
     <my-custom-directive> 
    </form> 
</div> 
// check to see the binding. 
{{ ctrl.userInput }} 

इसके बाद, partial.html में, मैं यह देखने के लिए जब निर्देश ठीक से काम कर रहा है कुछ डिफ़ॉल्ट मान सेट करने के लिए जा रहा हूँ, और जब मैं चूक देखते हैं।

partial.html 

<div class="form-group"> 
    <label>blankLabel</label> 
    <input type="text" 
      class="form-control" 
      ng-model="modelBlank"> 
</div> 

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

directive.js 

.directive('myCustomDirective', function() { 
    return { 
     templateUrl: 'partial.html', 
     compile: function (element, attributes) { 
      // Find the right element in the partial and assign a variable 
      var inputTag = element.find('input'); 
      // use .attr() on the variable and pass it two arguments. 
      inputTag.attr('ng-model', attributes.forModel); 
      // Find a different element in the partial and replace the text. 
      var labelTag = element.find('label'); 
      labelTag.html(attributes.forLabel); 
     } 
    }; 
}) 

आप कंसोल का उपयोग कर सकते हैं।लॉग (तत्व), लेकिन यह बहुत सारी जानकारी उत्पन्न करने जा रहा है। कस्टम मान पर एनजी-मॉडल सेट देखने के लिए पृष्ठ लोड होने के बाद तत्व का निरीक्षण करने के लिए बेहतर। यदि यह सही ढंग से जुड़ा हुआ है, तो index.html पृष्ठ पर {{ctrl.userInput}} को फ़ॉर्म में टाइप किए गए टेक्स्ट को दिखाना चाहिए।

यह बहुत काम है, लेकिन अब myCustomDirective अलग जानकारी में पारित के साथ पुन: उपयोग किया जा सकता है:

<my-custom-directive for-model="ctrl.userName" 
        for-label="Enter Your Name:" 
        for-other="more info for the directive"> 
<my-custom-directive> 
<my-custom-directive for-model="ctrl.userSelection" 
        for-label="Make a selection:" 
        for-other="more info for the directive"> 
<my-custom-directive> 

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