AngularJs निर्देश के अंदर डेटा बाध्यकारी

मुझे यह सुनिश्चित करने में कठिनाई हो रही है कि मैं निर्देश बनाते समय 2-तरफा डेटा बाध्यकारी बनाए रखता हूं। यहाँ है कि मैं क्या साथ काम कर रहा हूँ और बेला है:AngularJs निर्देश के अंदर डेटा बाध्यकारी

http://jsfiddle.net/dkrotts/ksb3j/6/

HTML:

<textarea my-maxlength="20" ng-model="bar"></textarea> 
<h1>{{bar}}</h1>

निर्देशक:

myApp.directive('myMaxlength', ['$compile', function($compile) { 
return { 
    restrict: 'A', 
    scope: {}, 
    link: function (scope, element, attrs, controller) { 
     element = $(element); 

     var counterElement = $compile(angular.element('<span>Characters remaining: {{charsRemaining}}</span>'))(scope); 

     element.after(counterElement); 

     scope.charsRemaining = parseInt(attrs.myMaxlength); 

     scope.onEdit = function() { 
      var maxLength = parseInt(attrs.myMaxlength), 
       currentLength = parseInt(element.val().length); 

      if (currentLength >= maxLength) { 
       element.val(element.val().substr(0, maxLength)); 
       scope.charsRemaining = 0; 
      } else { 
       scope.charsRemaining = maxLength - currentLength; 
      } 

      scope.$apply(scope.charsRemaining); 
     } 

     element.keyup(scope.onEdit) 
      .keydown(scope.onEdit) 
      .focus(scope.onEdit) 
      .live('input paste', scope.onEdit); 
     element.on('ngChange', scope.onEdit); 
    } 
} 
}]);

मैं पाठ क्षेत्र में लिखते हैं, मॉडल अपडेट नहीं हो रहा है जैसे मुझे इसकी ज़रूरत है। मैं क्या गलत कर रहा हूं?

स्रोत

2012-12-03 Dustin

मुझे पूरी तरह से यकीन नहीं है, लेकिन मुझे लगता है कि आप जो फ़िल्टर चाहते हैं, इस यूआरएल पर नज़र डालें, शायद यह आपकी समस्या के बारे में पुनर्विचार करने का एक शानदार तरीका है।

http://docs.angularjs.org/api/ng.filter:limitTo

स्रोत

2012-12-03 17:57:39

मुझे नहीं लगता कि मुझे यहां पर कठिनाइयों का सामना करना पड़ रहा है। मेरी समस्या बहुत सीधी है। टेक्स्टरेरा पर, मेरे पास एक मॉडल असाइन किया गया है। जब मैं myMaxlength निर्देश सक्षम करता हूं तो उस मॉडल पर 2-तरफा बाध्यकारी टूट रहा है। – Dustin

तुम सच में एक कस्टम के निर्देश की जरूरत है? ngMaxlength निर्देश के साथ AngularJS जहाजों को ngChange के साथ संयुक्त करने में आपकी सहायता हो सकती है।

उदाहरण के लिए, यदि आप निम्न HTML

<body ng-controller="foo"> 
    <form name="myForm"> 
     <textarea name = "mytextarea" 
        ng-maxlength="20" 
        ng-change="change()" 
        ng-model="bar"></textarea> 
     <span class="error" ng-show="myForm.mytextarea.$error.maxlength"> 
      Too long! 
     </span> 
     <span> {{left}} </span> 
     <h1>{{bar}}</h1> 
    </form>     
</body>

है तो फिर तुम सिर्फ इस अपने नियंत्रक में जरूरत

function foo($scope) { 
    $scope.change = function(){ 
     if($scope.bar){ 
      $scope.left = 20 - $scope.bar.length;    
     }else{ 
      $scope.left = ""; 
     }  
    }; 
    $scope.bar = 'Hello'; 
    $scope.change(); 
}

जितना डोम संभाल कोणीय करते हैं के रूप में आप कर सकते हैं।

यहाँ अद्यतन jsfiddle है: http://jsfiddle.net/jaimem/ksb3j/7/

स्रोत

2012-12-03 18:58:02 jaime

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

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

scope: { bar: "=ngModel" }

अन्यथा आप एक अलग गुंजाइश (http://docs.angularjs.org/guide/directive देखें) बना रहे हैं।

अन्य कारण से आप माता पिता से एक संलग्न के साथ डालने अनुदेश के बाद बदलने के लिए है कि (क्योंकि आप केवल dom.ready पर कोणीय bootstrapping कर रहे हैं) है:

element.parent().append(counterElement);

अद्यतन jsfiddle: http://jsfiddle.net/andregoncalves/ksb3j/9/

स्रोत

2012-12-03 19:26:18

अगर मैं समय से पहले मॉडल का नाम नहीं जानता तो मैं यह कैसे करूँगा? इसके अलावा, आपको तत्व के बाद element.parent()। Append() का उपयोग करने की आवश्यकता क्यों है। बाद()? – Dustin

यदि आप समय से पहले मॉडल नाम नहीं जानते हैं तो आप घोषणात्मक एनजी-मॉडल सिंटैक्स का बेहतर उपयोग नहीं करते हैं, और नियंत्रक स्कोप से मॉडल प्राप्त करते हैं (निर्देश में झूठ को सेट करें)। Element.parent()। Append() के बारे में, ऐसा इसलिए है क्योंकि आप dom.ready पर केवल कोणीय बूटस्ट्रैपिंग कर रहे हैं और जब निर्देश बूटस्ट्रैप चलाता है तब तक नहीं हुआ है, इसे dom.ready हैंडलर से हटा दें और आप बाद में उपयोग कर सकते हैं()। –

ठीक है मेरे पास यहां एक अद्यतन पहेली है: http://jsfiddle.net/dkrotts/WWCzQ/3/। मेरी समस्या अब मेरे पास है, मेरे स्कोप वेरिएबल वर्णों को निर्देश के लिए अलग किया जाना चाहिए ताकि मैं एक ही पृष्ठ पर इस निर्देश का कई बार उपयोग कर सकूं। जैसा कि अब है (दायरे के साथ: झूठा), वर्णों को मूल दायरे में साझा किया जाता है, और मुझे उस विशिष्ट चर को केवल निर्देश के लिए अलग करने की आवश्यकता है। – Dustin

AngularJs निर्देश के अंदर डेटा बाध्यकारी

उत्तर

संबंधित मुद्दे