AngularJS Kích hoạt ng-animate khi thay đổi giá trị ràng buộc

Question

Tôi có chỉ thị trong đó một số nội dung bị ràng buộc qua ng-html-bind-unsafe. Tôi muốn chuyển đổi khi nội dung thay đổi. Tôi có thể sử dụng jquery để làm mờ nó ra, thay đổi giá trị nội dung và làm mờ nó trở lại.

Có cách nào thanh lịch hơn với AngularJS không?

Answer 1

Trong góc 1.2.0, bạn có thể sử dụng chỉ thị đồng hồ để thay đổi nội dung và thêm sau đó xóa lớp học. Bạn có thể buộc một hoạt ảnh cho những lớp đó thêm và loại bỏ nó sẽ kích hoạt hiệu ứng mờ dần mà bạn đang tìm kiếm.

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 
    }); 
    }; 
}); 

Dưới đây là một bài viết phổ biến trên 1,2 hình ảnh động: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

Answer 2

Tôi chạy vào một vấn đề tương tự khi cố gắng để làm nổi bật văn bản trong một ràng buộc dữ liệu. Mục tiêu của tôi là làm nổi bật văn bản đang được thay đổi cho giao diện người dùng kiểu dáng đẹp hơn. Từ góc độ giao diện người dùng, điều này đảm bảo rằng người dùng biết những gì đang được thay đổi trong khi họ điền vào biểu mẫu.

Đây là những gì tôi đã học (I kèm theo một fiddle dưới đây)

Thứ nhất, bạn không muốn sử dụng đồng hồ. Điều này sẽ tạo ra một chu kỳ khó chịu của true :: false trên ng-class và do đó sẽ không tạo ra một chuyển tiếp rõ ràng.

Thứ hai, bạn không thể nghĩ góc cạnh như jquery nơi bạn tìm thấy phần tử và thay đổi thành phần đó. Chìa khóa để góc cạnh là khả năng sử dụng lại, những nỗ lực ban đầu của tôi bị thiếu nghiêm trọng.

Thứ ba, sự kiện như ng-focus, ng-blur, ng-click, (... và nhiều hơn nữa), là bánh mì và bơ trong việc nhận được kết quả tôi muốn.

Giải pháp của tôi là sử dụng ng lấy nét và ng-mờ để phát hiện khi một đầu vào đã được chỉnh sửa

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

Trong ng lấy nét tôi kêu gọi một chức năng nổi bật và đi qua một cuộc tranh cãi gọi là 'tên' . Lập luận này là chìa khóa để tái sử dụng.

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

Sau khi chuyển qua, chuyển đổi bằng đối số.

Đây là kicker ...

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

Khi chuyển đổi được == để lập luận thông qua sau đó nổi bật được áp dụng khi nó được == 'tên' + sai lớp 'noToggle' được áp dụng với mịn hoạt hình unhighlight.

Đợi ... còn ng-blur thì sao? Tôi vui mừng bạn đã hỏi! ng-blur gọi hàm 'doneHighlight' và chuyển cùng một đối số lớp.

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

Tuy nhiên, khi chuyển đối số, nó cũng gắn giá trị sai ở cuối tên lớp. Đây là một suy nghĩ khác sau đó jQuery nhưng cho phép tôi sử dụng lại các chức năng trong bộ điều khiển cho nhiều phần tử khi cần thiết;

Hy vọng điều này sẽ hữu ích!Tôi rất sẵn lòng trả lời bất kỳ câu hỏi nào khác.

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

Answer 3

Tôi nghĩ rằng có một cách tốt hơn có liên quan đến không có mã JS mới khác hơn là bao gồm ngAnimate.

Hãy ví dụ này:

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

Bằng cách đặt một lớp có sử dụng các giá trị, tôi có thể sử dụng khả năng ngAnimate cho những thay đổi lớp.

Trong SCSS của tôi (hoặc ít hơn) Tôi sẽ viết:

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

Và thì đấy! Màu nền sẽ chuyển thành màu vàng và ngược lại mỗi khi giá trị thay đổi khi ngAnimate tự động thêm và xóa các lớp như 'giá trị-2-thêm', 'giá trị-10-thêm', v.v ...