कोणीय जेएस

Question

के साथ टेम्पलेट करते समय सहायक तरीके का उपयोग करते हुए वर्तमान में अपनी पिछली टेम्पलेटिंग से कोणीय तक एक वेबसाइट को परिवर्तित करने की प्रक्रिया में। पिछली टेम्पलेटिंग प्रक्रिया में हम उपयोग कर रहे थे हम डेटा को सही तरीके से प्रदर्शित करने के लिए सहायक विधियों को कॉल करने में सक्षम थे। उदाहरण के लिए:

<script type="text/javascript"> 
$.views.helpers({ 
    parseDate: function (jsonDate) { 
     if (jsonDate != null) { 
      var newDate = Utils.PrettyDate(Utils.ConvertJsonDateToJsDate(jsonDate)); 
      return newDate; 
     } 
    } 
}); 
</script> 


<div class="post-info"> 
    <span class="posted-date">Posted {{:~parseDate(CreatedDate)}}</span>&nbsp|&nbsp<span>{{:ReplyCount}} Replies</span> 
</div> 

यह बहुत अच्छा था। जहां तक ​​templating जाता है, Angular के साथ एक ही प्रकार की कार्यक्षमता का उपयोग करने के लिए एक तरीका पता लगाने की कोशिश कर रहा है। क्या ऐसा कुछ करना संभव है? यदि हां, तो कैसे?

Answer 1

आप बस अपने नियंत्रक को विधि जोड़ते हैं। तिथि फिल्टर यहाँ वर्णित

function MyCtrl($scope) 
{ 
    $scope.parseDate = function(jsonDate) { 
     //date parsing functionality 
     return newParsedDate; 
    } 
} 

Answer 2

प्रस्तुत उपयोग के मामले को देखते हुए अपने सबसे अच्छे कॉल किया जाएगा: कुछ इस तरह:

<div class="post-info" ng-controller="MyCtrl"> 
    <span class="posted-date">Posted {{parseDate(CreatedDate)}}</span> 
</div> 

फिर नियंत्रक http://docs.angularjs.org/api/ng.filter:date इस फिल्टर का उपयोग करके आप लिख सकते हैं:

{{CreatedDate | date}} 

निर्दिष्ट फ़िल्टर अनुकूलन योग्य है ताकि आप विभिन्न दिनांक प्रारूप आदि का उपयोग कर सकें

आम तौर पर बोलने वाले फ़िल्टर स्वरूपण तर्क/यूआई सहायक कार्यों को encapsulating के लिए बहुत अच्छे हैं। यहां फ़िल्टर बनाने पर अधिक: http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters

फ़िल्टर अच्छे हैं और कई उपयोग मामलों में फिट हैं लेकिन यदि आप अपने टेम्पलेट में किसी भी फ़ंक्शन का उपयोग करने के बाद बस हैं तो यह संभव है। बस एक दायरे में एक समारोह को परिभाषित करने और आप अपने टेम्पलेट में सीधे इसका इस्तेमाल करने के लिए तैयार हैं:

{{doSomething(CreatedDate)}} 

जहां DoSomething एक गुंजाइश (एक मौजूदा एक या माता पिता के कार्यक्षेत्रों में से एक) पर परिभाषित करने की आवश्यकता:

function MyCtrl($scope) { 

    $scope.doSomthing = function(argument){ 
     //ui helper logic here 
    }  
} 

Answer 3

यदि आप केवल डेटा डिस्प्ले में रुचि रखते हैं, तो pkozlowski.opensource पहले से ही उल्लेख किया गया है, फ़िल्टर प्रदर्शन के लिए डेटा स्वरूपण के "कोणीय तरीके" हैं। यदि मौजूदा दिनांक फ़िल्टर पर्याप्त नहीं है, तो मैं एक कस्टम फ़िल्टर का सुझाव देता हूं। तो फिर अपने HTML अधिक "कोणीय" दिखेगा:

<span class="posted-date">Posted {{CreatedDate | dateFormatter}}</span> 

ऊपर वाक्य रचना यह स्पष्ट करता है कि आप (केवल) स्वरूपण कर रहे हैं।

यहाँ कस्टम फ़िल्टर है: - प्रत्येक नियंत्रक की जरूरत है कि उन्हें सिर्फ OurFormatters injects

angular.module('OurFormatters', []). 
filter('dateFormatter', function() {    // filter is a factory function 
    return function(unformattedDate, emptyStrText) { // first arg is the input, rest are filter params 
     // ... add date parsing and formatting code here ... 
     if(formattedDate === "" && emptyStrText) { 
      formattedDate = emptyStrText; 
     } 
     return formattedDate; 
    } 
}); 

एक मॉड्यूल में हमारे फिल्टर/formatters द्वारा encapsulating, यह भी (री) एकाधिक नियंत्रकों में उन्हें इस्तेमाल करने में आसान है।

फ़िल्टर का एक अन्य लाभ यह है कि उन्हें जंजीर बनाया जा सकता है।तो अगर किसी दिन आप तय करते हैं कि आपके ऐप्लिकेशन पर कुछ स्थानों में खाली तिथियाँ, कुछ भी नहीं (खाली हो) दिखाना चाहिए जबकि अपने अनुप्रयोग में अन्य स्थानों में खाली दिनांकों 'TBD' दिखाना चाहिए, एक फिल्टर उत्तरार्द्ध का समाधान कर सकता:

<span class="posted-date">Posted {{CreatedDate | dateFormatter | tbdIfEmpty}}</span> 

या अपने कस्टम फिल्टर एक या अधिक तर्क ले जा सकते हैं (ऊपर के उदाहरण एक तर्क का समर्थन करता है):

<span class="posted-date">Posted {{CreatedDate | dateFormatter:'TBD'}}</span>