angularjs ngHide bị trễ với ngShow

Question

Chào buổi sáng, tôi có một trường, khi nó được xem nó là một nhãn, khi nó được sửa đổi nó là một trường đầu vào, tôi kích hoạt nó với ng-show và ng-hide và một nút cho phép một giá trị boolean. Khi tôi kích hoạt chế độ chỉnh sửa nhãn ẩn và trường đầu vào hiển thị, đó là thời gian thực, khi tôi nhấp vào hủy và chuyển boolean, nhãn xuất hiện nhưng trường nhập mất một khoảng thời gian để ẩn, vì vậy tôi có hiệu ứng hình ảnh rất tệ . tại đây một số mã số

<input ng-model="name" ng-show="editing"> 
<label ng-hide="editing">{{name}}</label> 

<button ng-click="editing=true">Edit</button> 
<button ng-click="editing=false">Cancel</button> 

có cách nào để khắc phục sự cố này không?

Cảm ơn bạn

Answer 1

Bạn đã bao gồm ngAnimate?

nếu có, điều này có thể xảy ra. Tại các dự án của chúng tôi, chúng tôi tuyên bố và sử dụng một lớp trên tất cả các yếu tố dom nơi chúng tôi muốn tạo hoạt ảnh và chúng tôi nói với góc để animate chỉ những yếu tố trong callback config:

$animateProvider.classNameFilter(/animate/); 

Answer 2

Mã của bạn như không có vấn đề gì và bạn có thể thấy trong đoạn mã của tôi đang hoạt động như mong đợi. Bạn chưa tìm thấy sự cố của mình, bạn cần cung cấp cho chúng tôi nhiều HTML và mã hơn.

angular.module('myApp', []).controller('myController', function($scope) { 
 
    $scope.editing = true; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myController"> 
 
    <input ng-model="name" ng-show="editing"> 
 
    <label ng-hide="editing">{{name}}</label> 
 

 
    <button ng-click="editing=true">Edit</button> 
 
    <button ng-click="editing=false">Cancel</button> 
 
</div>

Answer 3

tôi đã cùng một vấn đề tất cả thời gian tôi đã có các yếu tố với cùng một var để ẩn/hiển thị (vì ng-animate), điều này xảy ra với ng-show/ng-hide/ng-if và cũng có thể với ng-switch nhưng không phải với ng-class. Vì vậy, sửa chữa nhanh là thay đổi mã của bạn cho:

<input ng-model="name" ng-class="{'ng-hide':!editing}"> 
<label ng-class="{'ng-hide':editing}">{{name}}</label> 

<button ng-click="editing=true">Edit</button> 
<button ng-click="editing=false">Cancel</button>