AngularJS 1.5 का उपयोग करते समय पहली बार चलाने पर मेरा निर्देश एनजी-एन का उपयोग करके एनीमेशन क्यों दर्ज नहीं करता है?

Question

http://codepen.io/anon/pen/MygQvb

मैं कोणीय 1.4.7 का उपयोग कर रहा था और फिर अपग्रेड करने का निर्णय लिया। इसके बाद, ng-if का उपयोग कर निर्देशों पर सभी एनिमेशन पहली बार काम करना बंद कर दिया था।

कोडपेन पर उपरोक्त उदाहरण दिखाता है कि मेरा मतलब क्या है, यदि आप ng-if टॉगल करते हैं तो यह पहली बार काम नहीं करेगा, लेकिन फिर यह ठीक काम करता है।

कुछ समान प्रश्न हैं, लेकिन कोई भी मेरी समस्या का समाधान नहीं करता है, और मुझे यह समस्या कभी भी कोणीय के पुराने संस्करण पर नहीं मिली है।

एक वास्तविक समाधान बहुत अच्छा होगा, लेकिन यदि संभव नहीं है, तो कोई भी कामकाज स्वागत है।

Answer 1

रूप jjmontes कहा, वैकल्पिक हल की आवश्यकता के निर्देश के टेम्पलेट के बजाय templateUrl का उपयोग करने का template में घोषित किया है, लेकिन इस तरह से मैं templateCache है, जो अपने आवेदन के लिए (नहीं में उपयोग करने पर कोई फायदा नहीं मिलेगा कोडपेन) मैं ग्रंट के साथ उपयोग करता हूं, जो इसे मेरी HTML फ़ाइलों से उत्पन्न करता है।

हर कोई जो ग्रंट का उपयोग करता दोहराव के साथ काम है, और कॉपी करने और मेरी निर्देश के HTML के हर बदलाव चिपकाने वास्तव में कठिन होगा नफरत है।

तो, मैं $templateCache का उपयोग अपने निर्देश के टेम्पलेट .get() और template संपत्ति पर इसका इस्तेमाल करने के लिए!

angular 
    .module('potatoApp', ['ngAnimate']) 
    .run(template) 
    // controllers, directives, stuff 

function template($templateCache){ 

    // Grunt will do this work for me 

    $templateCache.put('profile-float.directive.html', '<img ng-src="{{picture}}" alt="Profile image" ng-style="{\'max-width\': !higherWidth ? \'100%\' : \'\', \'max-height\': higherWidth ? \'100%\' : \'\'}">'); 
} 

function profileFloat($templateCache){ 
    var directive = { 
    restrict: 'E', 
    scope: { 
     picture: '=' 
    }, 
    template: $templateCache.get('profile-float.directive.html'), // Keeping the use of $templateCache 
    link: link 
    }; 

    // Rest of the directive's code 
} 

... 

Codepen:

नीचे यह देखें http://codepen.io/anon/pen/NNKMvO

वर्क्स आकर्षण की तरह! Hahaha

Answer 2

आपके उदाहरण में कोणीय ng-enter और ng-enter-active पहली बार नहीं जोड़ रहा है।

आपका कोड काम करता है, अपने निर्देश में, आप template बजाय templateUrl का उपयोग करते हैं, से परहेज $templateCache: http://codepen.io/anon/pen/qZWope:

function profileFloat(){ 
    var directive = { 
    restrict: 'E', 
    scope: { 
     picture: '=' 
    }, 
    template: '<img ng-src="{{picture}}" alt="Profile image" ng-style="{\'max-width\': !higherWidth ? \'100%\' : \'\', \'max-height\': higherWidth ? \'100%\' : \'\'}">', 
    link: link 
    }; 

    return directive; 

    // Rest of the directive code 
    ... 

• संक्रमण कक्षाओं की आसान डिबगिंग के लिए 5 सेकंड के लिए सेट के साथ codepen अपडेट किया गया,
• वर्कअराउंड का उल्लेख यहां दिया गया है: https://github.com/angular/angular.js/issues/12612, ऐसा लगता है कि यह एक मुश्किल बग है, सुनिश्चित नहीं है कि यह जल्द ही तय किया जाएगा या यहां तक ​​कि यदि 1.5 के लिए इसकी सूचना दी गई है।