5

से $ पार्सर्स पाइपलाइन मैं एक निर्देश लिख रहा हूं जिसके लिए ngModel की आवश्यकता है और मूल्य में हेरफेर करने के लिए स्वरूपण और पार्सर्स जोड़ता है। यह बहुत अच्छा काम करता है, लेकिन चूंकि हेरफेर बाहरी डेटा पर निर्भर करता है, मुझे $ देखना है, मैं इस घड़ी से मॉडल मूल्य को अपडेट करने का एक तरीका ढूंढ रहा हूं। मैंने $setViewValue पर कॉल करने का प्रयास किया लेकिन कुछ भी नहीं हुआ (क्योंकि $ viewValue नहीं बदला ??)।

निम्नलिखित सरल उदाहरण में, `factor' मॉडल मूल्य अद्यतन नहीं करते हैं करने के लिए परिवर्तन:

angular.module('app', []).directive('multiply', multiplyDirective); 
 

 
function multiplyDirective() { 
 
    return { 
 
     restrict: 'A', 
 
     require: 'ngModel', 
 
     scope: { 
 
      factor: '=multiply' 
 
     }, 
 
     link: function(scope, elem, attr, ngModel) { 
 

 
      ngModel.$formatters.push(function (value) { 
 
       return value/scope.factor; 
 
      }); 
 

 
      ngModel.$parsers.push(function (value) { 
 
       return value * scope.factor; 
 
      }); 
 

 
      scope.$watch('factor', function() { 
 
       // how to run the parsers pipeline to update modelvalue? 
 
       ngModel.$setViewValue(ngModel.$viewValue); 
 
      }); 
 
     } 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script> 
 

 

 
<body ng-app ng-init="factor = 1; value = 1"> 
 
    <input type="number" ng-model="value" multiply="factor" /> x 
 
    <input type="number" ng-model="factor" /> 
 
    = {{ value }} 
 
</body>

संपादित करें: यह काम करता है अगर मैं आंतरिक $$parseAndValidate विधि कॉल, लेकिन मैं आश्चर्य है कि अद्यतन को लागू करने के लिए कोई सार्वजनिक एपीआई है या नहीं।

संपादित करें: मुझे पता चला है कि ngModel.$setViewValue(ngModel.$viewValue); का व्यवहार 1.3.0 में बदल गया है। 1.2.x का उपयोग कर कोड काम करता है!

उत्तर

0

आपका निर्देश बिल्कुल लोड नहीं हुआ है। आपको मॉड्यूल नाम को <body ng-app="app"> जैसे एनजी-एप में देना होगा। और उसके बाद जब भी कारक संशोधित होता है तो ngModel.$setViewValue(ngModel.$viewValue) पर कॉल करें।

angular.module('app', []).directive('multiply', multiplyDirective); 
 

 
function multiplyDirective() { 
 
    return { 
 
     restrict: 'A', 
 
     require: 'ngModel', 
 
     scope: { 
 
      factor: '=multiply' 
 
     }, 
 
     link: function(scope, elem, attr, ngModel) { 
 

 
      ngModel.$formatters.push(function (value) { 
 
       return value/scope.factor; 
 
      }); 
 

 
      ngModel.$parsers.push(function (value) { 
 
       return value * scope.factor 
 
      }); 
 

 
      scope.$watch('factor', function() { 
 
       // how to run the parsers pipeline to update modelvalue? 
 
       ngModel.$setViewValue(ngModel.$viewValue); 
 
       
 
      }); 
 
     } 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<body ng-app="app" ng-init="factor = 1; value = 1"> 
 
    <input type="number" ng-model="value" multiply="factor" /> x 
 
    <input type="number" ng-model="factor" /> 
 
    = {{ value }} 
 
</body>

+0

मुझे लगता है कि 'ऐप' डिफ़ॉल्ट ngApp तर्क है, इसलिए निर्देश लोड हो गया था। लेकिन मैंने देखा, व्यवहार 1.3.0 में बदल गया। $ SetViewValue वाला कोड वास्तव में 1.2.23 में काम करता है लेकिन 1.3.0 में नहीं! – hansmaad

+0

आपकी मूल पोस्ट कोणीय 1.2.23 का उपयोग कर रही है जिसके साथ 'ऐप' डिफ़ॉल्ट ngApp नहीं है। मेरा जवाब सिर्फ v1.2.23 पर आधारित है, तो क्या मैं 'उत्तर स्वीकृत' या वोट वोट कमा सकता हूं? दूसरा, 1.3.x के लिए, 'ऐप' डिफ़ॉल्ट ngApp है। और स्पष्ट रूप से $ setViewValue कुछ हद तक बदल दिया गया है। मुझे इस पर कोई विचार नहीं हो सकता है, लेकिन न केवल गणना के परिणाम को संग्रहीत करने के लिए एक और स्कोप चर क्यों बनाएं? जब तक आप सिर्फ 'ngModelController' के साथ खेलना नहीं चाहते हैं:> – elaijuh

+0

हाँ, मुझे इसके लिए खेद है। मुझे उम्मीद नहीं थी कि यह एक संस्करण मुद्दा होगा। बस स्निपेट में डाला संस्करण एसओ रखा।लेकिन मैं इस जवाब को स्वीकार नहीं कर सकता, क्योंकि यह मेरी वास्तविक समस्या को हल नहीं करता है मेरे पास 1.3.x है। – hansmaad

0

v1.3.18 के सूत्रों का कहना से, मैं कोई सार्वजनिक API देखें। पाइपलाइन $$ parseAndValidate विधि है, जो भी $ commitViewValue से कहा जाता है से चला जाता है (प्रतिबद्ध करने के लिए/सेट अलग मूल्य या जरूरत कहीं भी होगी return)

1

एक बालक देर है, लेकिन मैं का वर्णन किया है तुम ऐसा कैसे कर सकते हैं here। यह AngularJS 1.6.x

पर काम करता है मूल रूप से आप $setViewValue() का उपयोग कर $parsers pipeline को ट्रिगर कर सकते हैं।

नीचे एक कोड स्निपेट है जो आपको $ पार्सर्स पाइपलाइन को "हाइजैकिंग" द्वारा प्रोग्रामेटिक रूप से एनजी मॉडेल सेट करने की अनुमति देता है। यह बंद करने का उपयोग कर किया जाता है।

इस तरह एक बंद के साथ एक $ पार्सर सेट करें:

const hijack = {trigger: false; model: null}; 
modelCtrl.$parsers.push(val => { 
    if (hijack.trigger){ 
     hijack.trigger = false; 
     return hijack.model; 
    } 
    else { 
     // .. do something else ... 
    }) 

तब के लिए (री) मॉडल आप modelCtrl.$setViewValue('newViewValue') साथ $viewValue बदलकर पाइपलाइन को गति प्रदान करने की जरूरत है स्थापित कर लिया। (हां यह सच है कि वर्तमान मूल्य के संबंध में नया दृश्य मान अलग होना चाहिए)।

const $setModelValue = function(model){ 
    // trigger the hijack and pass along your new model 
    hijack.trigger = true; 
    hijack.model = model; 
    // assuming you have some logic in getViewValue to output a viewValue string 
    modelCtrl.$setViewValue("some new view value"); 
    } 
संबंधित मुद्दे