thu gọn chuyển tiếp không hoạt động với giao diện người dùng của angular Bootstrap

Tôi đang cố gắng tạo một div sẽ hiển thị/ẩn khi một nút được nhấp. Các UI Bootstrap page cho thấy một ví dụ đơn giản tốt đẹp mà sử dụng một quá trình chuyển đổi css.thu gọn chuyển tiếp không hoạt động với giao diện người dùng của angular Bootstrap

Đây là số fiddle nơi tôi sao chép mã của họ, gần như chính xác (thay đổi nhỏ để tạo cú pháp làm nổi bật cú pháp html và dòng để khai báo "ứng dụng" của tôi trong js).

Như bạn có thể thấy, nó không hoạt động như trong ví dụ - không có chuyển đổi. Tại sao không? Có lẽ một quy tắc chuyển tiếp css là cần thiết - nhưng không phải là một phần của những gì mà bootstrap.cs cung cấp?

cho hậu thế, file html tương đương từ fiddle sẽ là:

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.js"></script> 

</head> 
<body ng-app="my_app"> 
    <div ng-controller="CollapseDemoCtrl"> 
     <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button> 
     <hr /> 
     <div collapse="isCollapsed"> 
      <div class="well well-lg">Some content</div> 
     </div> 
    </div> 
</body> 
</html>

và .js tương đương sẽ là:

var my_app = angular.module('my_app', ['ui.bootstrap']); 

my_app.controller('CollapseDemoCtrl', function ($scope) { 
    $scope.isCollapsed = false; 
});

Cảm ơn!

Nguồn

2015-05-11 Edward Newell

Tôi thực sự chạy vào vấn đề này chỉ ngày hôm qua. Tôi đã giải quyết vấn đề này bằng cách hạ cấp ui-bootstrap xuống phiên bản 0.12.0. Tôi nghĩ rằng có một lỗi là 0.13.0 khiến cho hoạt ảnh không hoạt động. – m0g

Chỉ cần hạ cấp phiên bản ui-bootstrap xuống 0.12.0. Có lỗi trong 0.13.0 khiến hoạt ảnh không hoạt động.

<html> 
 
<head> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script> 
 

 
</head> 
 
<body ng-app="my_app"> 
 
    <div ng-controller="CollapseDemoCtrl"> 
 
     <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button> 
 
     <hr /> 
 
     <div collapse="isCollapsed"> 
 
      <div class="well well-lg">Some content</div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

Các JS có thể giữ nguyên. Tôi vừa sửa đổi phiên bản ui-bootstrap trong mã html.

Đây là fiddle cập nhật cũng - https://jsfiddle.net/xv7tws10/5/

Chỉnh sửa: Xem phản ứng Premchandra của bên dưới. Rõ ràng bạn phải bao gồm ng-animate để có được hình ảnh động sụp đổ để làm việc trong góc 1.3.

Nguồn

2015-05-13 16:00:45 m0g

Aha. Không có vấn đề lớn sau đó tôi đoán. Cảm ơn! –

Xem câu trả lời của Premchandra Singh. Cần mô-đun ngAnimate để hoạt ảnh hoạt động. – Rockallite

Dường như có giới hạn phiên bản cho đến khi vị trí này dừng hoạt ảnh.

Đây là Fiddle để xem nó hoạt động như bạn muốn, nhưng với các phiên bản mới nhất, nó sẽ chỉ hoạt động.

<html !DOCTYPE html> 
<head> 

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 

</head> 

<body ng-app="my_app"> 
<br> 
<div ng-controller="CollapseDemoCtrl"> 
    <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button> 
    <hr /> 
    <div collapse="isCollapsed" > 
     <div class="well well-lg">Some content</div> 
    </div> 
</div> 

<script src="http://code.angularjs.org/1.2.28/angular.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.8.0/ui-bootstrap.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-animate.min.js"></script> 

<script> 
angular.module('my_app', ['ngAnimate', 'ui.bootstrap']); 
function CollapseDemoCtrl($scope) { 
$scope.isCollapsed = false; 
} 
</script>  
</body> 
</html>

Nguồn

2015-05-12 01:22:43 AngularJR

Vâng, có vẻ như bạn cần phiên bản cụ thể (không phải mới nhất) của cả góc cạnh và bootstrap! Tôi sẽ vượt qua điều đó! –

Thực ra, hãy xem câu trả lời của m0g ... –

Angulajs UI Bootstrap 0.13.0 cần mô-đun ngAnimate cho hoạt ảnh. Đăng ký ngAnimate nó sẽ hoạt động. issue

Original plnkr

Modified, animation working plnkr

Nguồn

2015-05-26 10:38:59

Yep hoạt động ngay bây giờ (Góc 1.4) :) – olefrank

Làm việc cho Angular 1.5! – z3ntu