2015-01-13 9 views
17

मैंने अभी कोणीय संस्करण 1.3.8 में अपग्रेड किया है।कोणीय जेएस एनजी-मॉडल-विकल्प गेटर-सेटर

1.2.23 संस्करण का उपयोग करते समय मैंने डेटा फॉर्म दृश्य को मॉडल और उपाध्यक्ष में बदलने के लिए एक निर्देश बनाया है।

यह मेरा निर्देश है:

.directive('dateConverter', ['$filter', function ($filter) { 

    return { 

     require: 'ngModel', 

     link: function (scope, element, attrs, ngModelController) { 

      // Convert from view to model 
      ngModelController.$parsers.push(function (value) { 
       return $filter('date')(new Date(date), 'yyyy-MM-ddTHH:mm:ss') 
      }); 

      // Convert from model to view 
      ngModelController.$formatters.push(function (datetime) { 
       return $filter('date')(datetime, 'MM/dd/yyyy'); 
      }); 
     } 
    }; 
}]); 

});

here कि getters और बाध्यकारी में setters अब समर्थित हैं, लेकिन मैं कहीं भी कैसे दोनों ही टिककर खेल और setters उपयोग करने के लिए नहीं मिल सकता है अच्छा। इसे करने का कोई तरीका है? यही है - क्या एनजी-मॉडल-विकल्प मेरे कन्वर्ट निर्देश को प्रतिस्थापित कर सकते हैं?

धन्यवाद

उत्तर

32

प्रलेखन थोड़ा फजी लग सकता है लेकिन उपयोग काफी सरल है। आप क्या करने की जरूरत:

  1. HTML:

    <input ng-model="pageModel.myGetterSetterFunc" 
    ng-model-options=" {getterSetter: true }"> 
    
  2. जे एस नियंत्रक में

    , बजाय वास्तविक मॉडल का एक समारोह है कि मान प्रदान करेगा बनाने के (+ अलग करना लागू) यदि कोई पैरामीटर नहीं भेजा गया है और यदि पैरामीटर भेजा जाता है तो मॉडल (+ अन्य परिवर्तन लागू करें) अपडेट करेगा।

गेटटर/सेटर्स मूल रूप से दृश्य मूल्य और मॉडल मान के बीच एक और "परत" है।

उदाहरण:

$scope.pageModel.firstName = ''; 
$scope.pageModel.myGetterSetterFunc: function (value) { 
    if (angular.isDefined(value)) { 
    $scope.pageModel.firstName = value + '...'; 
    } else {   
    return $scope.pageModel.firstName.substr(0, 
     $scope.pageModel.firstName.lastIndexOf('...') 
    ); 
    } 
} 

डेमो PLUNKER: http://plnkr.co/edit/Zyzg6hLMLlOBdjeW4TO0?p=preview

(सांत्वना जाँच - http://screencast.com/t/3SlMyGnscl)

नोट: यह कैसे को देखने के लिए दिलचस्प हो जाएगा होगा पुनर्प्रयोग के संदर्भ में इस पैमाने। मैं इन गेटर/सेटर्स को बाहरी पुन: प्रयोज्य तरीकों के रूप में बनाने की सलाह दूंगा और उनके लिए जनरेटर (क्योंकि डेटा मॉडल प्रत्येक मामले के लिए अलग है)। और नियंत्रकों में केवल उन जनरेटर को कॉल करने के लिए। बस मेरे 2 सेंट।

+3

से आप '' isDefined' के बजाय arguments.length' उपयोग कर सकते हैं - https://github.com/angular/angular.js/issues/11361 (gkalpak की टिप्पणी) देखें। – TrueWill

+0

इससे मुझे मेरी परेशानी से मदद मिली –

3

यह सवाल नहीं बल्कि पुरानी है - लेकिन आप ECMAScript 5 गेटर/सेटर methode जो मैं एनजी-मॉडल की getterSetter विकल्प के खिलाफ पसंद करेंगे उपयोग कर सकते हैं IE9 + (और निश्चित रूप से अन्य सभी प्रासंगिक ब्राउज़र) के लिए:

var person = { 
    firstName: 'Jimmy', 
    lastName: 'Smith', 
    get fullName() { 
     return this.firstName + ' ' + this.lastName; 
    }, 
    set fullName (name) { 
     var words = name.toString().split(' '); 
     this.firstName = words[0] || ''; 
     this.lastName = words[1] || ''; 
    } 
} 

person.fullName = 'Jack Franklin'; 
console.log(person.firstName); // Jack 
console.log(person.lastName) // Franklin 

यह उदाहरण है http://javascriptplayground.com/blog/2013/12/es5-getters-setters/