देरी

Question

]

एक देरी के कुछ प्रकार जब मैं उपयोग कर रहा हूँ एनजी-हाइड/एनजी शो और यह मेरे बहुत ज्यादा परेशान कर रही है। लेकिन जब जेएस फिडल में एक समान निष्पादित किया गया तो यह ठीक काम करता है। यहां JS Fiddle

ऐसा कोई कारण क्यों हो रहा है? और मैं इसे कैसे ठीक कर सकता हूं?

<div ng-controller="MyCtrl"> 
    Hello, {{name}}! 
    <button class="btn btn-warning" ng-show="isDisabled">HI</button> 
    <button class="btn btn-primary" ng-hide="isDisabled">BYE</button> 
    <a ng-click='relink()'> Link me to my existing account</a> 
</div> 

नियंत्रक:

var myApp = angular.module('myApp', []); 
    function MyCtrl($scope) { 
    $scope.name = 'Superhero'; 
    $scope.isDisabled = false; 
    $scope.relink = function() { 
     $scope.isDisabled = !$scope.isDisabled; 
     } 
    } 

Answer 1

बस तत्वों पर इस वर्ग को जोड़ने के इस सीएसएस एक बार

.btn.ng-animate { transition:0s none; 
     -webkit-transition:0s none; 
     animation: 0s none; 
     -webkit-animation: 0s none; } 

Answer 2

https://docs.angularjs.org/api/ng/directive/ngCloak उपयोग ngcloak निर्देश मैं AngularJS प्रलेखन निर्देश तत्व को लागू किया जा सकता से सामग्री के नीचे पाया, लेकिन वरीय उपयोग कई ngCloak लागू करने के लिए है ब्राउज़र दृश्य के प्रगतिशील प्रतिपादन की अनुमति देने के लिए पृष्ठ के छोटे हिस्सों के निर्देश।

<div ng-controller="MyCtrl"> 
    Hello, {{name}}! 
    <button class="btn btn-warning" ng-if="isDisabled">HI</button> 
    <button class="btn btn-primary" ng-if="!isDisabled">BYE</button> 
    <a ng-click='relink()'> Link me to my existing account</a> 
</div> 

Answer 3

कोशिश ng-ifng-show के बजाय या ng-hide चलो आप नहीं करना चाहते अपने आवेदन में एनिमेट करें। एचटीएमएल

<div ng-controller="MyCtrl"> 
    Hello, {{name}}! 
    <button class="btn btn-warning no-animate" ng-show="isDisabled">HI</button> 
    <button class="btn btn-primary no-animate" ng-hide="isDisabled">BYE</button> 
    <a ng-click='relink()'> Link me to my existing account</a> 
</div> 

Answer 4

आप इस सीएसएस

.no-animate { 
    -webkit-transition: none !important; 
    transition: none !important; 
} 

कर सकते हैं की कोशिश: