कोणीय जेएस ट्रिगर एनजी-एनिमेट जब बाध्यकारी मूल्य परिवर्तन

Question

मेरे पास एक निर्देश है जहां कुछ सामग्री ng-html-bind-unsafe के माध्यम से बाध्य है। जब सामग्री बदलती है तो मुझे एक संक्रमण करना पसंद है। मैं jquery का उपयोग इसे फीका करने के लिए कर सकता हूं, सामग्री मान बदल सकता हूं और इसे वापस फीका कर सकता हूं।

क्या AngularJS के साथ एक और अधिक शानदार तरीका है?

Answer 1

कोणीय 1.2.0 में आप एक ऐसे निर्देश का उपयोग कर सकते हैं जो सामग्री परिवर्तनों के लिए देखता है और जोड़ता है तो कक्षाओं को हटा देता है। आप उन वर्गों को एनीमेशन जोड़ सकते हैं और हटाते हैं जो उस लुप्तप्राय प्रभाव को ट्रिगर करते हैं जो आप खोज रहे हैं। http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

Answer 2

जब एक डेटा बाँध के दौरान लेख को हाइलाइट करने की कोशिश कर रहा एक ऐसी ही समस्या का सामना किया:

module.directive('contentChange', function(){ 

return { 

    scope: { 
    content: '=' 
    }, 

    template: '<span ng-bind-html="myContent"></span>', 

    link: function(scope, element, attrs){ 
    scope.$watch('content', function(){ 

    //add fader class to element 

    scope.myContent = content; 

    //remove fader class from element 
    }); 
    }; 
}); 

यहाँ 1.2 एनिमेशन पर एक लोकप्रिय लेख है। मेरा लक्ष्य एक चिकना यूआई के लिए बदला जा रहा पाठ को हाइलाइट करना है। यूआई परिप्रेक्ष्य से यह सुनिश्चित करता है कि उपयोगकर्ता जानता है कि फ़ॉर्म भरते समय क्या बदला जा रहा है।

यहाँ है कि मैं क्या सीखा (मैं नीचे एक fiddle संलग्न)

पहले, आप घड़ी का उपयोग नहीं करना चाहते हैं। यह एनजी-क्लास पर गलत :: गलत का अप्रिय चक्र बनाएगा और इसलिए एक स्वच्छ संक्रमण का उत्पादन नहीं करेगा।

दूसरा, आप कोणीय के बारे में नहीं सोच सकते हैं जहां आपको तत्व मिलते हैं और इसे बदलते हैं। कोणीय की कुंजी पुन: प्रयोज्यता है, जो मेरे शुरुआती प्रयासों में गंभीर रूप से कमी आई है।

तीसरा, एनजी-फोकस, एनजी-ब्लर, एनजी-क्लिक, (... और कई अन्य) जैसी घटनाएं, परिणाम प्राप्त करने में रोटी और मक्खन हैं।

मेरे समाधान जब एक इनपुट

<input ng-focus="highlight('name')" ng-blur="doneHighlight('name')" 
ng-model="user.name" /> 

संपादित किया जा रहा था एनजी फोकस मैं एक मुख्य आकर्षण समारोह बोल रहा हूँ और एक तर्क के माध्यम से गुजर 'नाम' कहा जाता है के दौरान पता लगाने के लिए एनजी फोकस और एनजी-कलंक का उपयोग करने के लिए है । यह तर्क पुन: प्रयोज्यता की कुंजी है।

$scope.highlight = function(className){ 
    $scope.toggle = className; 
} 

एक बार पारित होने के बाद, टॉगल तर्क के बराबर होता है।

यहाँ किकर है ...

<div ng-class="{'toggle': toggle=='name', 'noToggle': toggle=='name'+false}"> 
    {{user.name}} 
</div> 

जब टॉगल पारित कर दिया तर्क तो उजागर जब यह 'नाम' के लिए == है लागू किया जाता है करने के लिए == है + झूठी 'noToggle' वर्ग के साथ लागू किया जाता है चिकनी unhighlight एनीमेशन।

प्रतीक्षा करें ... एनजी-ब्लर के बारे में क्या? मैं खुश हूं कि आपने पूछा! एनजी-ब्लर एक 'किया हाइलाइट' समारोह कहता है और उसी वर्ग तर्क को पास करता है।

$scope.doneHighlight = function(className){ 
    $scope.toggle = className + false; 
} 

हालांकि, जब तर्क गुजर यह भी classname के अंत में एक झूठी मूल्य जुड़ जाता है। यह jQuery की एक अलग मानसिकता है लेकिन मुझे आवश्यकतानुसार कई तत्वों के लिए नियंत्रक में कार्यों का पुन: उपयोग करने की अनुमति देता है;

आशा है कि इससे मदद मिलेगी!मुझे किसी और प्रश्न का उत्तर देने में खुशी है।

http://jsfiddle.net/bebold/8MAKT/1

Answer 3

मुझे लगता है कि वहाँ एक बेहतर तरीका है कि ngAnimate सहित के अलावा अन्य कोई नया जे एस कोड शामिल है।

इस उदाहरण लें:

<span class="my-example value-{{myValue}}">{{myValue}}</span> 

एक वर्ग मूल्य का उपयोग करता है की स्थापना करके, मैं कक्षा में परिवर्तन के लिए ngAnimate क्षमताओं का उपयोग करता है सकते हैं।

मेरी एससीएसएस (या कम) में मैं लिखना होगा:

span.my-example{ 
    display: inline-block; 
    padding: 0 3px; 
    background-color: white; 
    transition: background-color 0.26s linear 0s; 
    &[class*="-add"] { 
     background-color: yellow; 
    } 
} 

और देखा! पृष्ठभूमि रंग प्रत्येक बार पीले और पीठ में बदल जाएगा जब मूल्य ngAnimate स्वचालित रूप से जोड़ता है और 'मूल्य-2-एड', 'मान -10-एड', आदि जैसे वर्गों को हटा देता है ...