Góc ng-animate 1.3. * Gây ra hành vi bất ngờ đến ng-class bên trong chỉ thị

Question

Tôi đang ở giữa quá trình chuyển đổi từ phiên bản 1.2. * Sang 1.3. *, Và tôi gặp một số rất lạ và quan trọng lỗi.

Trong ứng dụng của tôi, tôi có một rất đơn giản directive chứa một template với ng-class (với điều kiện để sở hữu phạm vi) đối với một số lý do nó không làm việc với 1.3. * Phiên bản, và nó làm việc tốt với 1.2. * Phiên bản.

Có giao diện này Plunker để minh họa sự cố.

Mã số Plunker này có phiên bản 1.2. * Ở góc và bạn có thể thấy nó hoạt động tốt.

Cố gắng thay đổi phiên bản góc (index.html)

<script src="https://code.angularjs.org/1.3.9/angular.js"></script> 
    <script src="https://code.angularjs.org/1.3.9/angular-animate.js"></script> 
    <!--<script src="https://code.angularjs.org/1.2.28/angular.js"></script> 
    <script src="https://code.angularjs.org/1.2.28/angular-animate.js"></script>--> 

Refresh trang, và sau đó bạn sẽ nhìn thấy lỗi:
góc không làm mới ng-lớp theo để thay đổi thuộc tính 'đang hoạt động'.

Tôi đã cố gắng hiểu những gì có thể gây ra lỗi này, và sau rất nhiều lần thử tôi thấy rằng 'ngAnimate' nguyên nhân gây ra sự cố này. cố gắng để xóa các 'ngAnimate' phụ thuộc (script.js):

//var app = angular.module('app', ['ngAnimate']); 
    var app = angular.module('app', []); 

Và sau đó bạn có thể thấy rằng mọi thứ đều tốt, vì vậy 'ngAnimate' phiên bản 1.3 * gây ra cho vấn đề này..

Vì vậy, đó là Lỗi AngularJS, tôi có đúng không?

Nếu không, tôi đang làm gì sai?

Answer 1

Bạn có bất kỳ lý do cụ thể nào để sử dụng tùy chọn replace trong chỉ thị không? Nếu không, bạn có thể chỉ cần loại bỏ nó và nó hoạt động tốt. Liên kết đến plunker làm việc với 1.3.9 góc:

http://plnkr.co/edit/jLIS9uJ1PHC64q6nEmtB?p=preview

V1.3.9 docs nói rằng replace bị phản đối và rất hiếm khi cần thiết cho các chỉ thị để làm việc, và dường như trong trường hợp của bạn nó cũng quản lý để gây ra một số rắc rối.

Answer 2

Theo tài liệu replace sẽ không được dùng nữa trong phiên bản 2. Vì bạn đang sử dụng Góc 1.3.9, điều đó sẽ ổn.

Để khắc phục vấn đề này hoặc là bạn có thể loại bỏ replace từ chỉ thị hay vẫn còn nếu bạn muốn sử dụng replace sau đó quấn chỉ mẫu nội dung trong đó có ng-transclude trong một div như dưới đây

<div><div ng-click='click()' ng-class='{\"{{defaultColorClass}}\" : !active, \"{{activeColorClass}}\": active, \"mousePointer\" : !active}' class='k-content-button-inner-style {{effectClass}} {{externalClass}}' ng-transclude></div></div>

Để biết thêm thông tham khảo - https://docs.angularjs.org/api/ng/directive/ngTransclude, Explain replace=true in Angular Directives (Deprecated).

Answer 3

@bensiu: Xóa biến không sử dụng * {{effectClass}} trong template sẽ làm cho nó hoạt động 1.4.4 trong ví dụ plunker được liên kết với câu hỏi.

Modified plunk here

* Chỉnh sửa: Có lẽ tôi nên nói "sử dụng một biến không trong phạm vi" hơn là "biến không sử dụng".